ion-slide was wrapped by .swiper-wrapper, we can vertical center align ion-slide to ion-slides via change the css class “.swiper-wrapper”.
But now, Ionic4 put it in SHADOW.
How do you vertical align ion-slide in ion-slides now?
Ionic4 makes components as shadow web component, and it’s very hard to style.
It increase very much time for developing, without js styling, is there any easy way to style component?
I do like this:
<ion-slides pager="true" [options]="slideOpts" style="height:100vh;">
<ion-slide>
<div style="display:block">
...content
</div>
</ion-slide>
</ion-slides>
And I don’t think the div with display:block is needed to answer your question, but it allows like headings and paragraphs to start on new lines correctly.
@arnhrwd
Many thanks for your quick response, however it doesn’t help. I already tried that.
So for as I know, position is controlled by “.swiper-wrapper” which is in shadow DOM.
I already move to pure origin Swiper, and it’s flexible and easy use.
After the wrapped by Ionic, it became hard to use.
For a web framework, FLEXIBLE should be the first thing to consider, Shadow may be the biggiest problem of Ionic4.
For later users who want to use Ionic4, it’s recommended to use non-shadow or shadow-less web components
Well it vertically centers the div for me. Anyway, I agree with you concerning the shadow DOM - the hindrances seem to outweigh the benefits. As much as I’ve tried I’ve not managed to get style to be applied via that way.
