andreaspfr February 2016

100% height in ion-slide-box not working

I'm using the ion-slide-box in my application. Sometimes the height of the content for a slide is not filling the whole content. This means I have a blank space at the bottom of the slide. In this scenario the user should also be able to slide when he swipes also the blank space at the bottom. However, this is not working since the size of the ion-slide is not 100%. I'm also not able to set the size to 100%. I already tried the following:

.slider{
  height:100%;
}

.slider-slide {
 height: 100%;
 min-height:100%;
} 

Using the above code the slide content is still not 100%. Thank you for your help. This is the html for the slide-box:

<ion-content>
    <ion-slide-box class="slider" on-slide-changed="slideChanged($index, this)" show-pager="false" active-slide="1" ng-init="handleSlideEnabling()" does-continue="true">
        <ion-slide class="slider-slides" ng-repeat="question in questions">
            <div class="slider-slide">   
            ... some content
            </div>
        </ion-slide>
    </ion-slide-box>
</ion-content>

Answers


sanjay joon February 2016

.slider{
  height:100vh;
  width:auto; 
}

.slider-slide {
  height: 100vh;
  width: auto;
}

Post Status

Asked in February 2016
Viewed 2,510 times
Voted 4
Answered 1 times

Search




Leave an answer