Need advice on Slide Box DIV Height

ionic-v1
1

Hello all,

I read a few post mentioned about how to get full height in Slide Box and after a few attempt, it just doesn’t work. I tried giving height 100% include !important to ion-pane, ion-content, ion-slide-box and ion-slide. All doesn’t work.

Please help, thank you.

My current code is as follow

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>

<body ng-app="starter">

    <ion-pane>
        <ion-content>
            <ion-slide-box on-slide-changed="slideHasChanged($index)">
                <ion-slide>
                    <div class="box blue">
                        <p>Blue</p>
                        <p>More Text</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="box yellow">
                        <p>Yellow</p>
                        <p>More Text</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="box pink">
                        <p>Pink</p>
                        <p>More Text</p>
                    </div>
                </ion-slide>
            </ion-slide-box>
        </ion-content>
    </ion-pane>
</body>

</html>

CSS

/* Empty. Add your own CSS if you like */

.yellow {
    background-color: yellow;
    font-size: 50px;
}

.blue {
    background-color: blue;
    font-size: 50px;
}

.pink {
    background-color: pink;
    font-size: 50px;
}

.slider {
    height: 100% !important;
    width: 100% !important;
}

.box {
    height: 100% !important;
    width: 100% !important;
}

Current Result

image
Screenshot 2015-06-21 01.png541×931 158 KB

2

Found the proper CSS to achieve what I need. For anyone else need similar setup, here is the CSS to use.

.slider,
.scroll,
.box {
    height: 100%;
}

and here is the HTML

<body ng-app="starter">

    <ion-pane>
        <ion-content>
            <ion-slide-box on-slide-changed="slideHasChanged($index)">
                <ion-slide>
                    <div class="box blue">
                        <p>Blue</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="box yellow">
                        <p>Yellow</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="box pink">
                        <p>Pink</p>
                    </div>
                </ion-slide>
            </ion-slide-box>
        </ion-content>
    </ion-pane>
</body>
1 Like