Error in Searchbar Display

Questions
1

Hi, im using f7 4.5.0 + vue theme: ios

I have a searchbar with searchbar-disable-button and after cancel the search, the page width is broken. the cancel button negative margin makes that the page width exeeds the viewport; maybe it should be display: none; ?
Images before cancel and after cancel button:

Before search:

before%20search
before search.png1466×662 69.7 KB

After typing and canceling the search:

after%20search
after search.png1455×831 106 KB

and here is the fiddle;

jsfiddle

any advice? Maybe the error is in my code, on where i place the searchbar?

1 Like
2

i managed yo fix it by adding this code

searchbarDisable (sb) {
      sb.$el.find('.searchbar-disable-button').css('display', 'none')
      this.$emit('search-reset')
    }

is this the correct way to do it?

3

Just add style="overflow: hidden" to that Searchbar <form> element:

<form class="searchbar" style="overflow: hidden" ...>
2 Likes
4

Thanks, didn’t think of that