Skip to content

Instantly share code, notes, and snippets.

@DarrylD
Created February 14, 2015 22:02
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save DarrylD/1bb7fddf89f8b00d4f6a to your computer and use it in GitHub Desktop.
Save DarrylD/1bb7fddf89f8b00d4f6a to your computer and use it in GitHub Desktop.
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
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