CODEWITHSUNDEEP
jqueryhtmlcssresize
user2465422
user2465422

Reputation: 157

Div height dynamically

I have this HTML code:

<div id="container">
    <div id="feedbackBox"></div>   
</div>

The #feedbackBox div doesn't appear in, initially.

The CSS is to centralize the div:

#container {
    position: absolute; width: 380px; height: 360px; left: 50%; top:50%; padding: 30px;
    margin-left: -220px; margin-top: -210px; 
}

But I need to change the height of #feedbackbox via jQuery.

I tested it and it doesn't work:

.expandInfo {
    height: 500px;
    margin-top: -221px;
}

$("#container").removeClass().addClass('expandInfo');

But it doesn't work! The CSS class doesn't apply, much less has been re-done (the calculation) so that the div remains centralized.

Upvotes: 0

Views: 76

Answers (2)

alfonsodev
alfonsodev

Reputation: 2754

Here you have an example
http://codepen.io/alfonsodev/pen/aKwiG

I've seen you are using #container in the css and then removing class. as container does not have any class does not make sense.

Look at the example container has a class container, then on click you can show the box and apply the class you want.

Upvotes: 0

BreyndotEchse
BreyndotEchse

Reputation: 2230

The height does not change, because of different selector priorities. (http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector)

You set the height for #container by ID. The height for .expandInfo is defined by class. But in CSS the ID-selector has a higher priority than the class-selector.

Try that:

#container.expandInfo {
    height: 500px;
    margin-top: -221px;
}

This selector has ID priority and class priority. It will override the height of #container

Upvotes: 1

Related Questions