[HTML] Ion-segments + ion-scroll

Ionic Framework ionic-v3
1

How can I make the purple zone height 100% with vertical scroll inside them in the example above?

I tried ion-scroll and ion-content with no success.

image
image838×731 49 KB

There is the (simplified) HTML:

<ion-header no-border>

    <ion-navbar color="marro">
        <ion-title>
            {{date|amDateFormat:'LL'}}
        </ion-title>
    </ion-navbar>

</ion-header>

<ion-content>

    <div class="game-information">

        <group-game-players [game]="game" [usuari]="usuari"></group-game-players>

        <ion-segment [(ngModel)]="tab" mode="md">
            <ion-segment-button value="information">
                <i class="fc fc-info"></i>
                {{'Información'|translate}}
            </ion-segment-button>
            <ion-segment-button value="chat">
                <i class="fc fc-chat"></i>
                {{'Chat'|translate}}
            </ion-segment-button>
        </ion-segment>

        <div [ngSwitch]="tab">

            <div *ngSwitchCase="'information'" padding-top>
                <game-information [game]="game"></game-information>
            </div>

            <div *ngSwitchCase="'chat'">
                <!-- This is the purple div-->
                <div class="test"></div>
            </div>

        </div>

    </div>

</ion-content>

<ion-footer>

    <ion-toolbar>
        <button ion-button block>
            {{'Footer Button'|translate}}
        </button>
    </ion-toolbar>

</ion-footer>

My system information:

Cordova CLI: 6.5.0
Ionic Framework Version: 2.2.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.1.4
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v7.1.0
Xcode version: Xcode 8.3.2 Build version 8E2002

Thanks in advance!

1 Like