Searchbar problem

Questions
1

Hi,I use expandble searchbar in my code it works well but its shape has problem like below.how can i solve the problem?

search
search.jpg720Ă—1280 87.1 KB

2

Can you share the code for this page or component ? Now it is very hard to guess what the problem might be. Could be that your “close” icon is missing or not accessible because of a typo ?

Ps,
Best way to discover the problem yourself is to use developer tools like Chrome provide, to find out which element is causing the red rectangle in de upper left corner.

4

thanks alot for your answer . Isend my code for you.

page html code:

<div  class="navbar">
              <div class="navbar-inner">
                 <div class="left">
                    <a href="#" class="link icon-only panel-open " data-panel="left" 
                    onclick="window.location.href='SanamSch:Navbar(1)'">
                    <i class="f7-icons">bars</i>
                    <span class="ios-only">bars</span> 
                    </a>
                 </div>
                 <div class="right" >
                    <a class="link icon-only searchbar-enable" data-searchbar=".searchbar-components">
                    <i class="icon material-icons md-only">search</i>
                    </a>
                 </div>
                 <form data-search-container=''.components-list" data-search-in=".item-title" class="searchbar searchbar-expandable searchbar-components searchbar-init">
                    <div class="searchbar-inner">
                       <div class="searchbar-input-wrap">
                          <input type="search" placeholder="Search components">
                          <i class="searchbar-icon"></i>
                          <span class="input-clear-button"></span>
                       </div>
                       <span class="searchbar-disable-button">Cancel</span>
                    </div>
              </form>
             </div>
           </div>
       <div class="searchbar-backdrop"></div>

java script code:

     var searchbar = app.searchbar.create({
         el: '.searchbar',
         searchContainer: '.list',
         searchIn: '.item-title',
         on: {
         search(sb, query, previousQuery) {
         console.log(query, previousQuery);
        }
        }
        });`
5

I don’t see anything wrong and I cannot load your code to use the developer tools to see the cause. Therefore I still have to guess. Since you are more or less using the example code, I guess that switching the direction from left to right into right to left is not complete for the padding. The left padding of input element might be still 73px and the right padding 48 px (which is correct for left to right) and might cause the red background to be visible? Perhaps your problem is solved if you adjust the left and right padding of the (search) input field in to 48px left and 73px right. Again it is a wild guess.

1 Like
6

thanks alot for your answer.