Slides Content Always At The Middle

How can I make the slides not middle aligned vertically?
Short paragraphs looks really nice but I have problems if I have long paragraphs.
align-items: flex-start; does not work for me.

This seem to work really nice.

But with long paragraphs

And when I scrolled, everything clips or overlaps.


Any thoughts? Thanks.

Its difficult to understand with so many striked out texts.

But this problem could be due to two reasons -

  1. Your question container has CSS property overflow: visible;. Try giving CSS as overflow: auto;.
    This will add scrollers to your question container if height of container is less than content’s height.

  2. There is a fixed height given to your question container. You can make its height variable by adding height: auto !important;.

Thanks for the reply. I had to strike out most of the texts because its quite confidential for now.
Anyway, Ill try your suggestion. Thanks!

Incase if my previous suggestion doesn’t help (it could get difficult to override CSS), try looking at ionic cards.
I believe you want to achieve same layout.

Like you I had problems with the layout of the slides regarding height.

It is hard to understand what is going on from the screen displays - but I have the following suggestions.

1: Check the layout of the page by setting the layout areas to a background colour - so you can precisely see where everything is located.

2: Give the <ion-slides element a fixed height - I use min-height: calc(100% - 64px); which makes the silder take up the full page after the toolbar at the top of the page.

3 Give each <ion-slide a fixed height i use max-height: calc(100% - 34px); the 34px is used make sure it does not go over the pager display.