Safe Areas

With the iPhone X release and further, Apple introduced so called safe areas, later implemented by Google Chrome with support in Android.

On devices with safe areas (like with top screen notch), app UI must include additional top/bottom spacing (to consider top notch and new bottom bar) in portrait orientation and additional left/righ spacing (to consider left/right notch) in landscape orientation.

In portrait orientation Framework7 will do required styles modifications automatically, but in landscape orientation some additional classes must be added to elements:

  • safe-areas - add to element that is stick to both left and right screen edges in landscape orientation
  • safe-area-left - add to element that is stick to the left screen edge in landscape orientation
  • safe-area-right - add to element that is stick to the right screen edge in landscape orientation
  • no-safe-areas - add to element which is is inside of safe-areas to remove additional horizontal spacing
  • no-safe-area-left - add to element which is is inside of safe-areas to remove additional left spacing
  • no-safe-area-right - add to element which is is inside of safe-areas to remove additional right spacing

The following elements don’t require such classes:

  • Popup, Sheet - already considered as full screen elements that is required extra spacing on both left and right sides
  • Left Panel - already considered as element that is stick to the left screen edge and requires extra spacing on left side
  • Right Panel - already considered as element that is stick to the right screen edge and requires extra spacing on right side

Here is the example app layout with such classes:

  1. <body>
  2.   <!-- app root -->
  3.   <div id="app">
  5.     <!-- left panel doesn't require any additional classes -->
  6.     <div class="panel panel-left panel-cover">
  7.       ...
  8.     </div>
  10.     <!-- right panel doesn't require any additional classes -->
  11.     <div class="panel panel-right panel-reveal">
  12.       ...
  13.     </div>
  15.     <!-- main view, full-wide element, add "safe-areas" class -->
  16.     <div class="view view-main view-init safe-areas" data-url="/">
  17.       <div class="page">
  18.         <div class="navbar">
  19.           ...
  20.         </div>
  21.         <div class="page-content">
  22.           <!-- full-wide list, will inherit safe-areas from view -->
  23.           <div class="list">
  24.             ...
  25.           </div>
  26.           <!-- full-wide content block, will inherit safe-areas from view -->
  27.           <div class="block">
  28.             ...
  29.           </div>
  30.           <!--
  31.             two-columns blocks: need to
  32.               - remove extra spacing on right side for left block
  33.               - remove extra spacing on left side for right block
  34.           -->
  35.           <div class="row">
  36.             <!-- remove right spacing on left block -->
  37.             <div class="block col no-safe-area-right">
  38.               ...
  39.             </div>
  40.             <!-- remove left spacing on right block -->
  41.             <div class="block col no-safe-area-left">
  42.               ...
  43.             </div>
  44.           </div>
  45.           ...
  46.         </div>
  47.       </div>
  48.     </div>
  49.   </div>
  50.   ...
  51. </body>

← Framework7 Icons Cheatsheet

Color Themes →