Slides pager does not respect safe inlet

[DavidWiesner]

Bug Report

Using the pager with ion-slides the pagination items lay within the bottom safe area. Ionic version:

[x] 4.1

Current behavior: If I add a ion-slides with pager=true on devices with safe areas the pagination items are inside the safe area Expected behavior: The position of the pager items should be above the save area. Steps to reproduce:

1. add <ion-slides pager="true"><ion-slide>1</ion-slide><ion-slide>2</ion-slide></ion-slides>
2. view on a device with safe area e.g.: iPhone 10 Related code: https://github.com/ionic-team/ionic/blob/bab56e8947c15281200ad2a6e421b88ce8260b47/core/src/components/slides/slides-vendor.scss#L225

~~This should be set to: bottom: calc(10px + var(--ion-safe-area-bottom, 0px))~~

Update (Thanks to the comment @Spinnenzunge) This should be exposed as custom css variable, that can be overwritten

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.1
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.4.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 7.1.4

System:

   Android SDK Tools : 25.2.5 (/Users/dboho/Library/Android/sdk)
   ios-deploy        : 1.9.2
   ios-sim           : 6.1.2
   NodeJS            : v10.15.0 (/usr/local/Cellar/node@10/10.15.0/bin/node)
   npm               : 6.4.1
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

[Spinnenzunge]

This should probably only be set if slides is a "fullsize" component. If there is a tab bar below the slides that already has the safe-area-inlet-padding it should not be added to the slides as well

[DavidWiesner]

@Spinnenzunge you are right. The best approach seems to be introducing a custom css variable to control the space below the pagination items.

[Spinnenzunge]

Couldn't you do something like that in your pages css file:

ion-slides[pager=true] {
  padding-bottom: var(--ion-safe-area-bottom);
  --padding-bottom: var(--ion-safe-area-bottom);
}

[DavidWiesner]

@Spinnenzunge yes, but this will padded the entire slider. I just want to add padding to the pager

[Spinnenzunge]

@DavidWiesner Ah ok, got it. Custom CSS4 Variable should be the most useful approach then.

[liamdebeasi]

Thanks for the issue. I agree with @Spinnenzunge, we should not automatically apply the safe area values because we do not know where the instance of the component is placed on the screen. That being said, I do not think a variable is needed here. ion-slides is not a shadow component, so you can adjust the bottom property directly.

Here is an example: https://codepen.io/liamdebeasi/pen/ZEQmbvw

You likely will need to use !important due to scoping (similar to https://github.com/ionic-team/ionic-framework/issues/17425, though this is not a scoped component). I am going to close this as this is already possible in Ionic Framework. Thanks!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.