Framework7 Starter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.1/js/framework7.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/framework7/2.3.1/css/framework7.min.css">
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>


<div id="app">
  <div class="view view-main ios-edges">
    <div class="page page-with-subnavbar" data-name="clinicas">
      <!-- Navbar -->
      <div class="navbar">
        <div class="navbar-inner sliding">
          <!-- Left -->
          <div class="left sliding">
            <a href="#" class="link icon-only panel-open" data-panel="left">
          <i class="icon f7-icons ios-only">menu</i>
          <i class="icon material-icons md-only">menu</i>
        </a>
          </div>
          <!-- Title -->
          <div class="title sliding">Clínicas</div>
          <!-- Right -->
          <div class="right">
            <!-- Link to enable searchbar -->
            <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-clinicas">
          <i class="icon f7-icons ios-only">search_strong</i>
          <i class="icon material-icons md-only">search</i>
        </a>
          </div>

          <!-- Searchbar is a direct child of "navbar-inner" -->
          <form class="searchbar searchbar-expandable searchbar-init searchbar-clinicas" data-search-container=".virtual-list-clinicas" data-search-item="li" data-search-in=".item-title">
            <div class="searchbar-inner">
              <div class="searchbar-input-wrap">
                <input type="search" placeholder="Buscar clínicas" />
                <i class="searchbar-icon"></i>
                <span class="input-clear-button"></span>
              </div>
              <span class="searchbar-disable-button">Cancelar</span>
            </div>
          </form>

          <!-- Subnavbar -->
          <div class="subnavbar">
            <div class="subnavbar-inner">
             ...

CSS

.searchbar .searchbar-input-wrap {
  overflow: hidden;
}

JavaScript

var app = new Framework7({
  root: '#app',
  theme: 'auto',
  routes: [{
    path: '/pacientes/',
    content: `
    <div class="page" data-name="pacientes">
  <!-- Navbar -->
  <div class="navbar">
    <div class="navbar-inner sliding">
      <!-- Left -->
      <div class="left sliding">
        <a href="#" class="link back">
          <i class="icon icon-back"></i>
          <span class="ios-only">Atrás</span>
        </a>
      </div>
      <!-- Title -->
      <div class="title sliding">Pacientes</div>
      <!-- Right -->
      <div class="right">
        <!-- Link to enable searchbar -->
        <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-pacientes">
          <i class="icon f7-icons ios-only">search_strong</i>
          <i class="icon material-icons md-only">search</i>
        </a>
      </div>
      <!-- Searchbar is a direct child of "navbar-inner" -->
      <form class="searchbar searchbar-expandable searchbar-init searchbar-pacientes"
      data-search-container=".virtual-list-pacientes" data-search-item="li" data-search-in=".item-title">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Buscar pacientes"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancelar</span>
        </div>
      </form>
    </div>
  </div>
  <!-- Page Content -->
  <div class="page-content hide-navbar-on-scroll">
    <!-- Searchbar backdrop -->
    <div class="searchbar-backdrop"></div>
    <div class="list simple-list searchbar-not-found">
      <ul>
        <li>No se han encontrado resultados.</li>
      </ul>
    </div>
    <!--Virtual List Pacientes-->
    <div class="list virtual-list virtual-list-pacientes media-list searchbar-found">
    </div>
    <!--Virtual List Pacientes-->
  </div>
</div>
`
  }]
});

var mainView =...