Two iOS bug in Framework7 Components

Questions
1

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

First one: Search bar + Prt:refresh component:

<template>
    <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>

            <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>
                    </div>
                    <span class="searchbar-disable-button if-not-aurora" >${translation.RESTAURANTS_PAGE.RESET_SEARCH}</span>
                </div>
            </div>

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

As you can see here: https://www.youtube.com/watch?v=8AJkNIIhAjs 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.
https://www.youtube.com/watch?v=rQ8qo1PWXUA
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

2

  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

3

  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:

routable-tabs
routable-tabs928×851 138 KB

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

4

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

5

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

6

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
7

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

8
1 Like
9

King. It works.
Thank you mate.

1 Like