CODEWITHSUNDEEP
ionic-frameworkangular-ui-router
RobYed
RobYed

Reputation: 71

ion-view height doesn't match content height

I experience an issue with nested views in my Ionic app. I have a custom tab navigation which is placed within my parent ion-view. The tab navigation is intended to scroll together with the content, which is located in an ion-nav-view underneath. For that I put the scroll="false" onto the child's ion-content.

The problem is, that my content won't expand the parent's height to fit the content's height. It has a height of 100%, which is fixed to the view's initial height. So at the end of the page there is content left, which is never displayed. Here is the template code (I am sorry, I cannot provide a plunkr example):

<ion-view>

    <ion-content on-swipe-left="tabs.goToNext()" on-swipe-right="tabs.goToPrevious()">
        <div class="tabbed-slidebox">
            <div class="tsb-icons">
                <div class="tsb-ic-wrp" style="">
                    <a href="#/app/claims/creation/step-what" ng-class="{active: tabs.activeTab === 'Was'}">Was</a>
                    <a href="#/app/claims/creation/step-who" ng-class="{active: tabs.activeTab === 'Wer'}">Wer</a>
                    <a href="#/app/claims/creation/step-where" ng-class="{active: tabs.activeTab === 'Wo'}">Wo</a>
                    <a href="#/app/claims/creation/step-when" ng-class="{active: tabs.activeTab === 'Wann'}">Wann</a>
                </div>
            </div>
        </div>
        <ion-nav-view name="stepContent">

            <!-- For illustration I copied ion-view from the template which will be rendered into this ion-nav-view -->
            <ion-view view-title="Schadenmeldung">
                <ion-content class="step step-what padding" scroll="false">
                    <!-- CONTENT -->
                </ion-content>
            </ion-view>

        </ion-nav-view>
    </ion-content>

    <div class="fab-sticky">
        <!-- some sticky button here -->
    </div>

</ion-view>

See a demo here

My view hierarchy looks somehow like this:

(I can provide the state config if that helps)

I already played around with the CSS a lot. But since I am no CSS Mastermind, I did not find a solution. The problem seems to come from the position: absolute of the ion-nav-view. It prevents the height to adapt to the content.

Can anyone help?

Upvotes: 2

Views: 1152

Answers (1)

TiefTMBadBad
TiefTMBadBad

Reputation: 1

you can add style into ion-nav-view for example： <ion-nav-view name="stepContent" style="height: 380px"></ion-nav-view>

Upvotes: 0

Related Questions