Two iOS bug in Framework7 Components

Hi, I’ve found two new Components UI bug that occurs only on ios.

First one: Search bar + Prt:refresh component:

    <div class="page">
        <div class="page-content ptr-content ptr-top" @ptr:refresh=${refresh}>
            <!-- Default pull to refresh preloader-->
            <div class="ptr-preloader">
                <div class="preloader"></div>
                <div class="ptr-arrow"></div>

            <div class="searchbar-backdrop"></div>
            <div class="searchbar">
                <div class="searchbar-inner">
                    <div class="searchbar-input-wrap">
                        <input type="search" name="search" placeholder="${translation.RESTAURANTS_PAGE.SEARCH_BAR}" />
                        <i class="searchbar-icon"></i>
                        <span class="input-clear-button"></span>
                    <span class="searchbar-disable-button if-not-aurora" >${translation.RESTAURANTS_PAGE.RESET_SEARCH}</span>

[....] the rest of the page [...]

As you can see here: if I use MD theme prt components works fine. But if I use ios theme, even the search bar is dragged by swipe down.

The second bug is with $f7.sheet.
As you can see if I open a $f7.sheet with MD theme, I can’t touch anything outise the sheet and this is good. But with ios I can click other components outside the sheet. because the gray overlay doesn’t exist.

It is just a component bug right? Thanks @nolimits4web

  1. PTRs in iOS/MD themes work differently. To make it work/look properly it is better to have Searchbar in page’s Subnavbar (like in most of the demos and in Kitchen Sink);

  2. Sheet has backdrop parameter which is by default disabled on iOS, just enable it to see that gray layer

  1. Ok, i miss that in the documentation. Maybe is better to have by default backdrop: true also on ios? In order to have less confusion?

  2. I did what you suggested and indeed the problem with the swipe out was solved. But, being the navbar inside a routable tabs, if I try to hide it in the second tab it happens that the prt is visible on screen. Here the two screen:

I’ve tried to set the subnavbar only in one page (in the specific template of the first route) but the search bar does not appear

Please, can you make a simple live demo on CodeSandbox? :slight_smile: How to ask a good question on forum

Here we go: AsoStrife Prt bug with searchbar and tabs - CodeSandbox

You have to options:

  1. Move Searchbar to the first tab AsoStrife Prt bug with searchbar and tabs (forked) - CodeSandbox
  2. Also toggle page’s subnavbar class when toggling subnavbar AsoStrife Prt bug with searchbar and tabs (forked) - CodeSandbox

Solution n° 2 is much elegant, but as you can see, setting ios as theme the problem persists: is visible the prt arrow. While with the first solution there are no problems with both themes with prt arrows, but if I do the swipe down the navbar goes down as I shown in the video.

If I can choose, the solution n° 2 could be the best. But we need to fix thr prt arrow in the second tab

1 Like

King. It works.
Thank you mate.

1 Like