Technically, you have to ask Apple that question. The browser provides the safe area insets and Main UI just respects that.
You can check other websites, like our community forum (powered by Discourse) or the Eclipse LMOS website (Eclipse LMOS | Eclipse LMOS) and you will notice the same behaviour.
In fact I can understand why Apple chose to have the safe areas symmetric, assymetric just looks really weird.
We will not start messing around with those safe areas, those are set by the browser or even somewhere higher in the hierarchy. It is not possible to handle the safe areas manually for each and every single device, hence this concept was introduced to browsers to be consumed by websites and webapps.
See env() - CSS | MDN.
iPad very likely sets no safe areas at all, but there is some spacing towards the edge of the screen.
You can override the defaults for the spacing between the widgets.
If you use custom widgets based on f7-card, just set the margin-left and margin-right style props, or if you use standard widgets, add style config to your page through the code tab and set the --f7-card-margin-horizontal CSS variable.
Thank you for the very useful backgound information.
1 Like
open HAB 5.1.3:
With echart it seems the safe area inset on the left side does not work?
iPhone 14 Pro with notch on the left in landscape mode. echart streches all the way to the left of the iPhone screen - the notch is covering most of the y-axis. I could push in the y-axis a bit more, but that would also impact other devices with no notch.
In portrait mode there is no problem → height as follows:
height: calc(100vh - var(--f7-navbar-height) - 48px - env(safe-area-inset-top) -
env(safe-area-inset-bottom))
Width as follows:
width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))
This is the code snippet:
- component: oh-chart
config:
chartType: year
height: calc(100vh - var(--f7-navbar-height) - 48px - env(safe-area-inset-top) -
env(safe-area-inset-bottom))
width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))
visible: =(!!props.itemSeries2 && !props.itemSeries3) && ((vars.chartoptions ||
props.defaultChartOption) === 'year')
slots:
grid:
- component: oh-chart-grid
config:
containLabel: true
left: 10
right: 65
bottom: 55
Any chance to automatically push in the y-axis for devices with notch such as the iPhone?
Have you tried it with:
- component: oh-chart
config:
chartType: year
visible: =(!!props.itemSeries2 && !props.itemSeries3) && ((vars.chartoptions ||
props.defaultChartOption) === 'year')
style:
height: calc(100vh - var(--f7-navbar-height) - 48px - env(safe-area-inset-top) -
env(safe-area-inset-bottom))
width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))
slots:
grid:
- component: oh-chart-grid
config:
containLabel: true
left: 10
right: 65
bottom: 55
instead?
Well, I tried just a minute ago.
Unfortunately, putting height and width under style doesn’t work - the notch still overlays the chart.
This works for height, but not for width:
This neither works for height nor for width:
Could this be a bug or is it just a special case with oh-chart/echart?
@florian-h05
I think I found a reasonable workaround - maybe the only solution to this problem?
I forgot to mention one probably quite important info… the oh-chart is part of an f7-popup that is called as follows:
- component: f7-popup
config:
backdrop: true
class: ='popupChart_' + props.popupId
closeByBackdropClick: true
tabletFullscreen: true
style:
left: env(safe-area-inset-left)
right: env(safe-area-inset-right)
width: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right))
slots:
default:
- component: = 'widget:' + props.widgetUid
config:
Title: =props.Title
colorSeries1: =props.colorSeries1
colorSeries2: =props.colorSeries2
defaultChartOption: =props.defaultChartOption
itemSeries1: =props.itemSeries1
itemSeries2: =props.itemSeries2
labelSeries1: =props.labelSeries1
labelSeries2: =props.labelSeries2
persistenceService1: =props.persistenceService1
persistenceService2: =props.persistenceService2
popupId: =props.popupId
The style elements made it work.
The widget that f7-popup triggers has the following configuration:
- component: oh-chart
config:
chartType: year
height: calc(100vh - var(--f7-navbar-height) - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom))
visible: =(!!props.itemSeries2 && !props.itemSeries3) && ((vars.chartoptions ||
props.defaultChartOption) === 'year')
stylesheet: |
.menu {
top: 10px ;
right: 5px ;
transform: scale(0.8);
transform-origin: top right;
padding: 0 !important;
}
.menu-inner {
padding: 0 !important;
}
slots:
grid:
- component: oh-chart-grid
config:
containLabel: true
left: 10
right: 65
bottom: 55
legend:
- component: oh-chart-legend
config:
bottom: 15
orient: horizontal
show: true
With these setting, I get a fullscreen popup with safe areas left and right on the iPhone for the notch:
… and no safe areas on e.g. iPad:
