CODEWITHSUNDEEP
cssionic-frameworkionic3
S.C.
S.C.

Reputation: 920

Set ion-scroll viewport height correctly

First thing first, here is the screenshot showing what I have implemented.

app screenshot

As you can see, there are 3 main parts - the header, the scrollable section and the tab bar. I managed to disable scrolling of ion-content with this:

ion-content.no-scroll {
    > .scroll-content {
        overflow: hidden !important;
    }
}

Right now I have set the height of the header to 24vh and the ion-scroll element to 58vh. I obtained these values by trial and error, which finally gives me an acceptable result as shown in the screenshot.

What I would like to ask is how to set the height of the ion-scroll element instead of hard-coding it relative to viewport height. I tried using height: 100%, but it just didn't work at all.

Below is the style I am using.

.header {
    height: 24vh;

    ion-scroll {
        height: 58vh;
    }
}

Update

Turns out my objective can be accomplished by making use of ion-header and ion-content as suggested by Sergey. Simply put the thumbnail, user name, and ion-segment inside ion-header, and the list of items in ion-content as usual will result in what I want.

If, for any reason, you cannot use ion-header to hold these contents, you may refer to my answer below.

Upvotes: 2

Views: 2333

Answers (1)

S.C.
S.C.

Reputation: 920

Finally made it working with flex and got rid of those hard-coded height properties.

Add a root container to wrap everything reside under ion-content.

.root-container {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: 100%;
}

<ion-content>
    <!-- extra container holding all contents -->
    <div class="root-container">
        <!-- fixed-height header -->
        <div class="header">...</div>

        <!-- built in Ionic 3 segment buttons -->
        <ion-segment>...</ion-segment>

        <!-- wrap ion-scroll up -->
        <div class="scroll-container">
            <ion-scroll>...</ion-scroll>
        </div>
    </div>
</ion-content>

Then, I set a fixed height for the header.

.header {
    flex: 0 0 150px;
    width: 100%;
}

Stop ion-segment from growing or shrinking.

ion-segment {
    flex: 0 0 auto;
}

Most importantly, add a container to wrap ion-scroll up.

.scroll-container {
    flex: 1 1 100%;

    ion-scroll {
        width: 100%;
        height: 100%;
    }
}

Upvotes: 1

Related Questions