Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ionic slide box dynamic height - fixes the issue where the slide boxes aren't taking up the full height of the device
app.directive('dynamicHeight', function() {
return {
require: ['^ionSlideBox'],
link: function(scope, elem, attrs, slider) {
scope.$watch(function() {
return slider[0].__slider.selected();
}, function(val) {
//getting the heigh of the container that has the height of the viewport
var newHeight = window.getComputedStyle(elem.parent()[0], null).getPropertyValue("height");
if (newHeight) {
elem.find('ion-scroll')[0].style.height = newHeight;
}
});
}
};
})
<ion-slide-box>
<ion-slide class="slide" dynamic-height>
<ion-scroll>
<div class="slide-box box">
<!-- your stuff -->
</div>
</ion-scroll>
</ion-slide>
</ion-slide-box>
@eicu

This comment has been minimized.

Copy link

eicu commented May 20, 2015

It haven't work for me, because the height of elm.parent was 0px.
If anyone have the same problem -> I have fixed it by get the height of the ion-content tag. https://gist.github.com/eicu/db0d1464b2fd404f3882

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.