Get the height of a div without Jquery

Hi,

I am trying to dynamically set the height for my slides (those being of different height, very common problem…)

I want to dynamically set the height of using:

on-slide-changed="slideHasChanged($index)"

However, I cannot find a single solution that works on the net and this forum to get the height of a div without using jquery.

Even the “pure javascript” way (document.getElementById(“div”).offsetHeight;) won’t work.

I tried:

angular.element(document.querySelector('div')).offsetHeight; 
angular.element(document.querySelector('div')).height; 

=> without success

Can anyone help me?
Thanks

Did you try with a directive ?

Like putting a directive on each ion-slide, thus you can fix the height of each slide like this by putting

<ion-slide height="your_height" set-height></ion-slide>

the directive would be named setHeight then.

But I don’t know in advance the height of the div.

The height depends on its content, which changes.

That’s why I need to dynamically get the height of the div.

Thanks for your suggestion.

If it depends of its content, you can do it simply in CSS thus.

Best,

Actually I really can’t do it with css.

I fetch data from the database, depending on how much data there is, the scroll will be more or less long.

Sometimes it’s half the screen size, which means there is an empty space at the bottom of the page where I can’t swipe left/right to go to the other slide, coz it’s not part of the slide height.

That’s why I really need to get the height of the slide dynamically,there must be a way to do the equivalent of jquery $(‘div’).height()

Sometimes it’s half the screen size, which means there is an empty space at the bottom of the page where I can’t swipe left/right to go to the other slide, coz it’s not part of the slide height.

I think, this is wrong, I am pretty sure you can set in css the height of the div for being at least 100%, and if it is more you can do a scroll or what you want, or by using ion-pane.

(I did something like this for my app, so I know you can do it with simply html and css)

I need to set the height of the based on the height of the ion-slide.

So the height of the ion-slide-box depends whether I am on slide 1 or 2 or 3 etc.
That’s why I can’t do it with CSS. I just can’t.

But to get back on track, is there really no way to get the height of a div using angular / ionic ??

Re,

I am sorry but your problem is really unclear, if you can set a codepen, or explain a bit more…

This:

or this:

are exactly my problem.
Except that the first solution uses jquery to get the height.
And the second one hides the pages during transitions, which kills the purpose of a slidebox.

Again, the problem is that if I have 3 slides, each with unknown height (can’t be defined with css thus), they will all take the height of the biggest slide. (because the whole ion-slide-box will take the biggest height)