[SOLVED] The 2nd search bar is not working

Questions
1

hi there, i’m useing f7 latest V, so i have a problem with searchbars

the issue is the search bar in the 1st tab ‘#tab-1’ works fine but in the 2nd tab ‘#tab-2’ the searchbar is not working

my ‘tab-1’

    <div class="page-content tab" id="tab-1">
     <div class="searchbar-backdrop"></div>
  <form class="searchbar">
  <div class="searchbar-inner">
  <div class="searchbar-input-wrap">
  <input type="search" placeholder="search">
  <i class="searchbar-icon"></i>
  <span class="input-clear-button"></span>
   </div>
   <span class="searchbar-disable-button">Cancel</span>
 </div>
</form>

 
   
    <div class="searchbar-found" >
  <li>..</li>
 some other codes
 </div>

my ‘tab-2’ is the same but searchbar is not working :frowning:

<div class="page-content tab" id="tab-2">
          <div class="searchbar-backdrop"></div>
<!-- Searchbar is part of scrollable page content -->
<form class="searchbar">
  <div class="searchbar-inner">
<div class="searchbar-input-wrap">
  <input  type="search" placeholder="Search">
  <i class="searchbar-icon"></i>
  <span class="input-clear-button"></span>
</div>
<span class="searchbar-disable-button">Cancel<span>
  </div>
</form>

 
   
    <div class="searchbar-found" >
    <li>..</li>
    some other codes
    </div>

sorry for my bad english
and thanks for any help

2

I made an example for you https://jsfiddle.net/Silver775/ecjxq0vs/

2 Likes
3

thank you so much, it worked fine :wink:
i got the idea before you reply but i was kinda lazy to do it , anyway thanks again