5 replies [Last post]
shaoz
shaoz's picture
Offline
newbie
London
Last seen: 12 years 23 weeks ago
London
Timezone: GMT+1
Joined: 2010-08-20
Posts: 3
Points: 4

Hi All

I have 2 divs stack on each other, nested inside a main div with fixed height. The top div is toggled 'on' and 'off' using javascript. I want that when the the top div is 'on', the bottom div should apply an 'overflow: auto' when it's compressed instead of pushing the whole thing down. But I don't know if that's possible in css, if it's not, please tell me.

Here's the code -HTML:

<div id="main">
    	<div id="theForm">
        	<div id="top">
            	<p>You can set the height of an element with the height, pixelHeight and posHeight style properties. In that case, the value of the height contains the height of the visible contents with the horizontal scrollbar, but without the padding, border and the margin. You can get the value of the height style property in different units with these properties, not the rendered height of the element. </p>
            </div>
            <div id="bottom"></div>
        </div>
    </div>

and -CSS:

#main {
	border: 1px solid #777;
}
 
#theForm {
	height: 500px;
	background: #39c;
	position: relative;
}
 
#top {
	max-height: 100%;
	width: 400px;
	background: #FC0;
 
}
 
#bottom {
	height: 200px;
	width: 400px;
	background: #096;
}

Thank you in advance.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Yes, it can be done.

Quote:

I want that when the the top div is 'on', the bottom div should apply an 'overflow: auto' when it's compressed instead of pushing the whole thing down.

In your Javascript, where you have the event that does the *whatever* it's using to show the "top" div, also find the "bottom" div and add a class to it.

You'll have this new class already styled in your CSS sheet:
.theNewClass {
overflow: auto;
}

If you are using a library, you already have a pre-built addClass function. If you aren't, you can get a helper function that does this at any of those Javascript Snippets sites.

I'm no expert, but I fake one on teh Internets

shaoz
shaoz's picture
Offline
newbie
London
Last seen: 12 years 23 weeks ago
London
Timezone: GMT+1
Joined: 2010-08-20
Posts: 3
Points: 4

Hi Stomme poes, Thanks for

Hi Stomme poes,

Thanks for your response.

So that means there is no way to do this in CSS only. Because, I was thinking of the same solution but I just didn't want to use Javascript if it was possible, as it can be heavy sometimes. Are you sure there are no CSS way of doing it?

Thanks

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Not if Javascript is

Not if Javascript is controlling the appearance and disappearance of the top div, and not if the bottom div is supposed to react to the Javascripted top div.

What is happening to the top div exactly (is it appearing and vanishing?) and what is the Javascript event?

If you have addClass, it would be 2 lines of code (find the element called "bottom", add the class) and whatever event makes the top do the opposite, same 2 lines (find "bottom", remove the class). Total 4 lines, less if you're using a library like jQuery.

Otherwise, it's possible to fake something, but you'd need to give more info about what exactly is happening. You could have #main have overflow: hidden and a set height, or overflow: hidden on theForm, and when top appears, bottom simply vanishes from sight simply because it got pushed down past the bottom of theForm or main.

I'm only saying it's impossible (currently, cross-browser) to have elements react to Javascript events with CSS alone. It may well be possible to fake something.

I'm no expert, but I fake one on teh Internets

shaoz
shaoz's picture
Offline
newbie
London
Last seen: 12 years 23 weeks ago
London
Timezone: GMT+1
Joined: 2010-08-20
Posts: 3
Points: 4

Basically, the div that

Basically, the div that toggles on and off, is an error message box. it appears on top of a div containing a form, if there's an error.

The error message box appears using jquery/javascript but it pushes everything down. I agree that it should do that, but I just want that when it does the pushing, a scrollbar appears on the bottom div containing the form so the user can scroll up and down, and the layout is not broken.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Quote: The error message box

Quote:

The error message box appears using jquery/javascript but it pushes everything down. I agree that it should do that, but I just want that when it does the pushing, a scrollbar appears on the bottom div containing the form so the user can scroll up and down, and the layout is not broken.

Why isn't the box containing both error and form flexible (theForm)? Why cut it off at a set height? Please don't say layout: otherwise, you page has been broken for anyone who needed to enlarge the text anyway.

If there must still be a set height, the box with the set height should have overflow: auto on it all the time, then.

Or, you can use min-height.

#theForm {
min-height: 500px;
}
* html #theForm {height: 500px;}
since IE6 doesn't know min-height.

If only #bottom has the scrollbar, that's going to be a nasty form to work with. The height left over in #theForm box may be such that there's only a line or a few lines showing at a time...
better to keep #bottom as high as reasonable and make #theForm scroll.

I'm no expert, but I fake one on teh Internets