[Solved] Left side panel not full screen height


#1

Left side panel not full screen height when on a iphone device with a notch.


#2

Correct, because top part is Statusbar https://framework7.io/docs/statusbar.html


#3

Yeah, but no native app works that way. They all extend through the status bar. LinkedIn, Lyft, Uber, PersonalCapital, etc


#4


#5


#6

Lot of native apps works that way. If you need such behavior, it can be easily tweaked by adding few custom styles, something like:

.panel-cover {
  top: 0;
  z-index: 10100;
  height: 100%;
  --f7-page-content-extra-padding-top: var(--f7-statusbar-height);
}
.panel-cover .navbar {
  height: calc(var(--f7-navbar-height) + var(--f7-statusbar-height));
}
.panel-cover .navbar-inner {
  top: var(--f7-statusbar-height);
}
.panel-backdrop {
  z-index: 10050;
  top: 0;
  height: 100%;
}

#7

Thanks! It looks awesome now!

(I had tried playing with zindex and padding, but didn’t know about the extra padding var)