Error in Searchbar Display

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:

After typing and canceling the search:


and here is the fiddle;

jsfiddle

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

1 Like

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?

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

<form class="searchbar" style="overflow: hidden" ...>
1 Like

Thanks, didn’t think of that