Div height dynamically

Question

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.

set the margin-top: 0 and then see what happens (thinking that the css is being applied but the div is off the screen). — user2417483
– user2417483, Commented Aug 10, 2013 at 16:01
putvandre, this is right. I need to increase the container size when feedbackbox appear. As my container is fixed size, need to increase the height via code. Piis not found a way to centralize the div without using fixed size. — user2465422
– user2465422, Commented Aug 10, 2013 at 16:02
No no jeff, the div is centralized in the screen. Is an login page. — user2465422
– user2465422, Commented Aug 10, 2013 at 16:03

BreyndotEchse · Accepted Answer · 2013-08-10 16:01:01Z

1

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

answered Aug 10, 2013 at 16:01

BreyndotEchse

2,23015 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

alfonsodev · Accepted Answer · 2013-08-10 16:09:04Z

0

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.

answered Aug 10, 2013 at 16:09

alfonsodev

2,7542 gold badges25 silver badges31 bronze badges

Collectives™ on Stack Overflow

Div height dynamically

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related