jQuery: When to query new outer height after CSS change?

Question

If I do

var theHeight;
element.css('min-height', h);
theHeight = element.outerHeight();

in Chrome I get the old outer height.

I have to do

var theHeight;
element.css('min-height', h);
setTimeout(function() {
  theHeight = element.outerHeight();
}, 1);

instead (or, of course, anything which produces a similar effect) to make outerHeight report the "correct" height (which I expect to be the persisting real height we can see after changing min-height).

Unfortunately, setTimeout is not an option for me. What can I use instead? It should work in all major browsers (current versions).

I was not able to reproduce your issue. I was getting the correct height. I used Chrome itself — Rajshekar Reddy, Mar 24 '16 at 08:31
@Zlatev: No `height` set, and `h` has the value `''` which makes the former effect of `min-height` disappear. — ideaboxer, Mar 24 '16 at 08:33
@Reddy: I can't set `height`. `min-height` is crucial, because otherwise a possibly growing content was not able to spread the element. — ideaboxer, Mar 24 '16 at 08:35
@Reddy: Yes, I remove `min-height` and afterwards measure the real size of the element (which depends on its actual content). — ideaboxer, Mar 24 '16 at 08:36
I was not able to reproduce it brother, check this http://imgur.com/m6bZTWL — Rajshekar Reddy, Mar 24 '16 at 08:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107202/discussion-between-ideaboxer-and-reddy). — ideaboxer, Mar 24 '16 at 08:55
Is using ```'auto'``` as your ```h``` value an option? Seems to do the job. https://jsfiddle.net/dekkard/k2nvpvd2/ — dekkard, Mar 24 '16 at 09:25
Using `'auto'` must have the same effect as removing the minimum height completely, isn't it? — ideaboxer, Mar 24 '16 at 10:50

score 0 · Answer 1 · answered Mar 24 '16 at 09:04

setTimeout is NOT your best option.

What you want to do is apply some javascript after the DOM has loaded (CSS is applied before document.ready).

You can do easily with JQuery.

$(document).ready(function(){
  modifySomeDomElement();
});

docs here.

I hope this helps,

Rhys

jQuery: When to query new outer height after CSS change?

1 Answers1