[SOLVED] Framework7 V2 Expandable Searchbar and Subnavbar

Questions
1

Hello community!

I’m having a little problem when using an Expandable Searchbar with Subnavbar on MD (on iOS looks ok). I’ve searched about it and couldn’t find nothing related to it.

The thing is that when clicking on the Search button the Searchbar expands and it creates a white space on the right of the screen. I couldn’t figured out what’s wrong, but I know that if I remove the Subnavbar, the Expandable Searchbar works fine.
See pic below. Thanks in advance.

This happens when I click the search button (creates a white space on the right on all the screen):

SS2
SS2.jpg413×732 15.2 KB

This is my code:

<div class="page page-with-subnavbar" data-name="clinicas">
  <!-- Left panel with cover effect-->
  <div class="panel panel-left panel-cover theme-dark">
    <div class="view">
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">Left Panel</div>
          </div>
        </div>
        <div class="page-content">
          <div class="block">Left panel content goes here</div>
        </div>
      </div>
    </div>
  </div>
  <!-- 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">
          <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" data-search-container=".list">
        <div class="searchbar-inner">
          <div class="searchbar-input-wrap">
            <input type="search" placeholder="Buscar"/>
            <i class="searchbar-icon"></i>
            <span class="input-clear-button"></span>
          </div>
          <span class="searchbar-disable-button">Cancel</span>
        </div>
      </form>
      <!-- Subnavbar -->
      <div class="subnavbar">
        <div class="subnavbar-inner">
          <!-- Subnavbar content, for example tabs buttons -->
          <div class="segmented">
            <a href="#" class="button button-active">
              <i class="icon f7-icons ios-only">person</i>
              <i class="icon material-icons md-only">person</i></a>
            <a href="#" class="button">
              <i class="icon f7-icons ios-only">calendar</i>
              <i class="icon material-icons md-only">date_range</i></a>
            <a href="#" class="button">
              <i class="icon f7-icons ios-only">world</i>
              <i class="icon material-icons md-only">public</i></a>
            <a href="#" class="button">
              <i class="icon f7-icons ios-only">world</i>
              <i class="icon material-icons md-only">public</i></a>
          </div>
        </div>
      </div>

    </div>
  </div>

  <!-- Page Content -->
  <div class="page-content hide-navbar-on-scroll">...</div>
2

Hi,
its seems like a bug.
you can try this as a fix. but i wouldent use it;

return {
  on: {
    pageInit: function (e, page) {
      var self = this;
      var app = self.$app;
      self.searchbar = app.searchbar.create({
        el: page.$el.find('.searchbar'),
        on: {
          enable(evt) {
            Dom7('.page').css({'display':'none'})
            setTimeout(function() {
              Dom7('.page').css({'display':'block'})
            }, 0)
          }
        }
      });
    }
  }
}
1 Like
3

That would disable the css for .searchbar for an instant?

4

no, every .page in the dom will bee hidden and show again.

5

Doesn’t seem like a good solution. I don’t know if maybe the Expandable Search Bar with Subnavbar aren’t made to work together.

6

Pushed fix for this to repo. As for now, if you don’t have autocomplete on this searchbar then you can just add the following CSS rule:

.searchbar .searchbar-input-wrap {
  overflow: hidden;
}
1 Like
7

Thanks for replying.
That CSS made the magic!. But what if I want to put autocomplete in the future?.

8

Then you have to wait for next update where the fix is on core level, and it will work with autocomplete

1 Like
9

Ok, thanks for replying!.