Hide Status bar on iPhone X for some pages so the top Image can cover the whole notch area?


#1

Is it possible to hide the status bar on iPhone X for some pages so the top image can cover the whole notch area?

this is what I have now :frowning:

this is what I need

55

is it possible in framework7 to make the top image fill the notch area?

thanks


#2

I just installed cordova-plugin-statusbar and added on before page this:

app.statusbar.hide()

the status bar is hidden and image show well to fit the notch area…

but the problem I see is that when going to another page and coming back to this again…
the status bar shows again on top filling the area again and making the image looks not in the right position:

any solution for this?


#3

I found this as a solution I do not know if this is a smart solution but I modify the styling to make this works and works but I do not know if there is a better way to do it without touching the styling:

.ios .navbar~:not(.no-navbar) .page-content {
padding-top: 0px;
}


#4

hi

are you using cordova-plugin-ionic-webview. plugin?

I am having difficulties to get this image full screen, we use cordova-plugin-ionic-webview plugin and cordova-statusbar plugin.

the app.statusbar.hide() app.statusbar.show() are not working. none of the methods of status bar are not working.

can you share with me, your plugin setups?

thank you


#5

Hey, Hi!

I am not using ionic so I do not use cordova-plugin-ionic-webview. plugin. Here I send you the list of plugins I have installed so far:

The first thing you can do it is to check if you are using the latest version of framework7 I was using version 3 and I have to install everything again to have the latest updates that included a lot of improvement for iPhone X and so on…

In this case I used this link below and I used the Framework7 CLI for that reason.

https://framework7.io/cli/

After installed I changed the directory to Cordova and I installed all plugins you see now in the graphic…

then I put my code inside www folder inside cordova/www/

at the end of the app.js I put the following code:

$(document).on('DOMContentLoaded', function() {
  console.log('DOMContentLoaded');
  app.statusbar.hide();
});

to be sure it is hidden by default.

my home page use the full screen starting from the top so I deleted the nav div section from the top for this reason:

<template>
  <div class="page">
    <div class="page-content">
...

and from internal pages I did the same if I need to get to top of the screen to put the image and I do not need a navigation bar there:

<template>
  <div class="page">

    <!--
    <div class="navbar">

      <div class="navbar-inner sliding">

        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
          </a>
        </div>

      </div>
    </div>
-->

I general for pages that I need to put the image at the top I just deleted this section nav

    <!--
    <div class="navbar">

      <div class="navbar-inner sliding">

        <div class="left">
          <a href="#" class="link back">
            <i class="icon icon-back"></i>
          </a>
        </div>

      </div>
    </div>
-->

and I put a fixed div content at the top in this case containing the image or slider and set the height of it in my case I want the image at the top to be fixed when scrolling so always on top so I put the z-index higher number than the page content:

    <div class="topbar-fixed">
    ...
    </div>
.topbar-fixed {
position: absolute;
height: 180px;
width: 100%;
top: 0px;
background-color: #040428;
z-index: 2;
}

In my case the app.statusbar.hide() app.statusbar.show() were working fine for me but the problem was that I did not liked the effect from pages with status bar and pages without so I did that to look nice and clean and smooth between pages…

let me know if you need more information :slight_smile:
I’m happy to help!
regards!


#6

thank you so much

will setup as you mentioned and update you.

I would like to use the expandable cards for my app. which looks nicer and cool.

thank you for the details.


#7

Let me know anything I have also used expandable cards with dynamic content loaded via Ajax request it was a little tricky to make it work but now it works almost just fine…

I recommend you reading my post here and when using dynamic content inside expandable card try to use on the fly content generated instead of fixed content specially when card is opened and destroy this content when card is closed! :slight_smile:

here a link about the ideas and solutions I found when using expandable cards with dynamic content:

LINK 1

LINK2

Look also for the expandable card methods that are very helpful with this:
https://framework7.io/docs/cards.html#card-app-methods

In my case I have to use them like this because my cards were also created with infinite scrolling methods:

$(document).on('card:opened', '.card', function(el) {
...

I hope it helps to you too :slight_smile:
best regards…!


#8

thank you so much. its a great help.

yes, I am looking for that too.


#9

Welcome I hope you can make it work!! :slight_smile: good weekend!