PDA

View Full Version : Scrolling div problem



bendjoe
Sep 23rd, 2011, 07:24 PM
<div style="overflow-y:scroll; height :250px;">
<asp:Table ID="tbl" runat ="server">

</asp:Table> </div>

I am adding table rows into the above table which is inside a div which is set up to scroll vertically. Even though the vertical scroll bars do appear the dynamically added content grows out of the div whose height is set to 250px.
The page Layout is two column with the left column having a fixed width and the right column as fluid.This div is in the left column. Can anyone help me with this.
Thanks

alykins
Sep 23rd, 2011, 08:40 PM
well what are you trying to do? you said the scroll bars apear so that tells me the problem is already solved (ie overflow:scroll;) are you trying to make the div grow instead? you could set min-height:250px; and then leave it at that and it would grow with the content (ie the table as it grew but would by default be 250px)
I guess what I am getting at is you problem is a little unclear if you could elaborate we can help more efficiently

bendjoe
Sep 23rd, 2011, 08:55 PM
The right column has a height of 750px and it will not grow. The left column initially has the same height, but adding the table rows made the left column height to increase. So I put the table inside the above mentioned div and set the y scroll property. The vertical scroll bar showed up. But the left column height still kept increasing as I added more table rows.
Here is the HTML

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 800px; /*Set left margin to LeftColumnWidth*/
border-style :ridge ;

}

#leftcolumn{
float: left;
width: 800px; /*Width of left column*/
margin-left: -100%;
}
.innertube{
margin: 5px; /*Margins for inner DIV inside each column (to provide padding)*/

}
<div >
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube">
<iframe id="iframe1" runat="server"
style="width:100%; height: 750px;"></iframe>
</div>
</div>
</div>

<div id="leftcolumn">
<div class="innertube">
A Data Grid is here.
div style="overflow-y:scroll; height :250px;">
<asp:Table ID="tbl" runat ="server">

</asp:Table> </div><br /><a id="anchorId" runat="server" ></a><div id="errorDiv"></div>
</div>

</div>


</div>

alykins
Sep 23rd, 2011, 08:59 PM
ok that makes more snese now... it is increasingly growing because you do not define a height so it will keep expanding to meet it's contents needs... set a height and then set overflow:scroll;
so....


#leftcolumn{
float: left;
width: 800px; /*Width of left column*/
margin-left: -100%;
height:750px;
overflow:scroll;
}

bendjoe
Sep 24th, 2011, 12:40 AM
Works in FF not in IE.

guiyman
Sep 24th, 2011, 07:18 PM
My guess is the fact that it uses the 'position' property. When you add the position property to any object, no matter where it is in the HTML, it automatically breaks away from containers and such. I don't know if this is really a bug....

alykins
Sep 24th, 2011, 08:35 PM
My guess is the fact that it uses the 'position' property. When you add the position property to any object, no matter where it is in the HTML, it automatically breaks away from containers and such. I don't know if this is really a bug....

where do you see any position property?