Ionic-framework: swiper-pagination-bullets position needs to be customizable

[corysmc]

Bug Report

Ionic Info

@ionic/[email protected]

Describe the Bug
I have a full screen slider, when it appears on iPhone X, the pagination bullets are too close to the bottom. I'd like to move them up using env(safe-area-inset-bottom). Note: If you don't have a full screen slider, you probably won't need to move the bullets.

Steps to Reproduce

1. Create slider
2. swiper-pagination-bullets are part of shadow dom so you can't style

Expected Behavior
css var available to customize bottom positioning of bullets.

Additional Context

[corysmc]

@mhartington

[stephannagel]

Any updates?

[paulstelzer]

If you want, you can create a PR so that it can be merged :)

[malwatte]

I faced the same issue and I use global.scss for the moment
global.scss
.swiper-pagination {
bottom: 20px !important;
bottom: calc(env(safe-area-inset-bottom) + 20px) !important;
}

[stephannagel]

Workaround: if you have multiple slides with different layouts, you can add the modifierClass to the slide options.

slideOpts = {
pagination: {
el: '.swiper-pagination',
modifierClass: 'nameyourspecialclass'
}
};

You are still required to position your 'nameyourspecialclass' in the global.css.

[brandyscarney]

Thank you for the issue! I took a look into this and since slides are no longer shadow this should not be an issue using normal CSS. It does require users to target the pagination classes, but due to the complexity of swiper's implementation there isn't a good way to assign a CSS variable for the pagination without doing it on the actual pagination element. For example, swiper styles bullets one way here:

.swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 10px;
  left: 0;
}

and styles the dynamic bullets differently:

.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  left: 50%;
}

Because of the fact that the .swiper-pagination-bullets-dynamic class isn't on the host element, we would have to set the CSS variable inside of this rule, which would defeat the purpose because you would still have to target the above class to override it.

However, this is possible by using CSS and targeting the pagination classes: https://codepen.io/brandyscarney/pen/RwwJgxG

I'm going to close this since the original issue dealt with shadow and that is no longer an issue. Please open a new issue if you strongly feel that the above doesn't cover your use case. 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.