Geek Answers Handbook

How do I compensate for an overflow property?

follows from this question

This is the first image without overflow. The top is before I press the button, and the bottom is after.

alt text http://img19.imageshack.us/img19/7594/nooverflow.png

And this is an image with overflow:auto . The top is before I press the button, and the bottom is after.

alt text http://img134.imageshack.us/img134/4015/overflow.png

What I'm looking for is a panel that will look like the one in the first image before clicking the button, and what it looks like in the second image when I click the button.

Here is a copy of the corresponding code:

 <asp:Panel ID="pnlCustomer" runat="server" style="background-color:#ccccff; width:500px; height:90%; position:relative;" BorderColor="DarkBlue" BorderWidth="2px"> ... <style> div.textboxArea { text-align:center; float:left; width:40%; margin-top:35px; } .textboxArea TextBox { width:80%; } .centerMeVertically div { position:absolute; top:50%; vertical-align:middle; height:30px; width:100%; margin-top:0px; text-align:center; } div.centerMeVertically { float:left; width:20%; text-align:center; height:60px; position:relative; } p { margin:-35px 0 0 0; } .container { margin-top:10px; margin-bottom:10px; overflow:auto; } </style> <div class="container"> <div style="width:100%;"> <div class="textboxArea"> <p><asp:Label runat="server" ID="lblInfoDesc" /></p> <asp:TextBox ID="txtInfoDescription" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" /> </div> <div class="centerMeVertically"> <div><asp:Button ID="btnNextInfo" runat="server" Text="Next" /></div> </div> <div class="textboxArea"> <p><asp:Label runat="server" ID="lblInfoData" /></p> <asp:TextBox ID="txtInfoData" runat="server" TextMode="MultiLine" Rows="3" MaxLength="500" /> </div> </div> </div>
+2
source share
2 answers

How do you "hide" textboxArea? Right now, textboxArea is completely contained in the container, so overflow: auto must contain it. I assume that you are hiding the textboxarea through visibility: hidden, which will render it not visible, but it will still take its place.

Instead, use display: none or, often preferred, set it off the screen using absolute positioning until you need it.

+2
source

I do not understand why you need overflow or positioning. You have only one outer div (with a blue background / border) and two inner divs, the second of which starts with display: none , and then when you click the button changes to display: block .

It was better to vertically align the elements with the vertical-align: middle rule, and each element is set to display: inline-block - which even works in IE6!

+1
source

More articles:


All Articles