CODEWITHSUNDEEP
javascriptmodal-dialog
Ben
Ben

Reputation: 687

How to increase Googles polyfill dialog height dynamically

I use Googles polyfill dialog and want to increase it's height dynamically depending if a user clicks a dialog button to add more elements (rows) in it. This is part the javascript which is called when the user cklicks that button : 

var mc_dialog = document.getElementById('mc_dialog');
var h = mc_dialog.style.height;
console.log("mc_dialog height = ",h);

but height is simple empty, no value - nothing

While mc_dialog.style.height = "500px" works perfect.

Why do I not get the value of mc_dialog.style.height ?

EDIT :

Ok after the answer of Evil Penguin I set the height initially in the javascript function, which opens the dialog, like this : 

mc_dialog.style.height = "500px"

and later when the user clicks to add content to the dialog I can retrieve the height now, so it look like this now :

var mc_dialog = document.getElementById('mc_dialog');
var h = parseInt(mc_dialog.style.height);
mc_dialog.style.height= h+50+"px";

and it works perfect.

But now I have the question why do I have to set the style.height initially ? Isn't it a permanent attribute of that element ? And if not, why ?

Upvotes: 2

Views: 57

Answers (1)

Evil Penguin
Evil Penguin

Reputation: 114

Here is similar question.

.style.height only works if you have set the property in the first place.

EDIT:

Here is reference of HTMLElement.style property. It says:

The style property is not useful for learning about the element's style in general, since it represents only the CSS declarations set in the element's inline style attribute.

So as i understand it, if there is no style="smth" in the element's inline declaration, HTMLElement.style.smth doesn't work.

Upvotes: 1

Related Questions