Make content in <td> scroll

L

Lloyd Sheen

I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100% of
the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of the
page.

HELP please

Lloyd Sheen
 
M

Mike

add a div tag around the table?
something like

<div style="height:10px;width;100px;">
--your html table
</div>

(something like that)
 
A

Anthony Jones

Lloyd Sheen said:
I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100% of
the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of the
page.
Click to expand...

The clue is that a TD does not honor the overflow style attribute.

Try placing a DIV with the style attributes "height:100%; overflow-y:auto"
inside the TD.

What DTD does the page use? The meaning of height differs between modes.
 
M

Masudur

I have now spent the entire morning on what I think should be easy. I
cannot for the life of me figure out how to make a simple one row, two
column table where is the contents of the one of the colums exceeds 100% of
the height it should add a scroll bar to ensure that the table remains at
100% of the browser screen and the contents do not scroll off the end of the
page.

HELP please

Lloyd Sheen
Click to expand...

Hi..

You can take a div inside the td and then set the div's style in such
a way so that it scrolls if huge content showed up in the div. here is
a breaf code to help you...
<table width="100%" style="border:solid 1px red; height:
400px;">
<tr>
<td width="50%" style="border:solid 1px green;">
&nbsp;
</td>
<td >
<div style="overflow:auto; border:solid 1px
#cccccc; height:400px;">
<%--Huge content will go here--%>
</div>
</td>
</tr>
</table>

Hope the above code help you...

Thanks & Best of luck
Md. Masudur Rahman
www.munna.shatkotha.com
www.munna.shatkotha.com/blog
 
L

Lloyd Sheen

Anthony Jones said:
The clue is that a TD does not honor the overflow style attribute.

Try placing a DIV with the style attributes "height:100%; overflow-y:auto"
inside the TD.

What DTD does the page use? The meaning of height differs between modes.
Click to expand...

The DTD is :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

In Mike's post he used a px height and that works. If I use a % height it
does not work.

Thanks,
LS
 
B

bruce barker

if you use xhtml or html 4.0 doctypes then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table style="height:100%;width:100%;">
<tr>
<td style="background-color:red"> </td>
</tr>
</table>
</body>
</html>

then the td will be the width of the page, but only 1 line space high. this
is because in the w3c standard there is no default height to a body, so the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.


-- bruce (sqlwork.com)
 
L

Lloyd Sheen

bruce barker said:
if you use xhtml or html 4.0 doctypes then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table style="height:100%;width:100%;">
<tr>
<td style="background-color:red"> </td>
</tr>
</table>
</body>
</html>

then the td will be the width of the page, but only 1 line space high.
this
is because in the w3c standard there is no default height to a body, so
the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.


-- bruce (sqlwork.com)
Click to expand...

I suppose that is the same for the width??

Thanks
LS
 
B

bruce barker

no, you can use 100% width. this probably does what you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style>
html { height: 100% }
body { height: 100%; margin:0px; border:0px; padding:0px;}
.layout { height:100%; width:100%; margin:0px; border:0px;
padding:0px; border-collapse: collapse;}
.scroll { overflow:auto;}
</style>
<body>
<table class="layout" >
<tr>
<td>left</td>
<td class="layout" style="width:50%;">
<div class="layout scroll">
auto scroll content here
</div>
</td>
</tr>
</table>
</body>
</html>

looks best in safari

-- bruce (sqlwork.com)
 
L

Lloyd Sheen

bruce barker said:
no, you can use 100% width. this probably does what you want:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<style>
html { height: 100% }
body { height: 100%; margin:0px; border:0px; padding:0px;}
.layout { height:100%; width:100%; margin:0px; border:0px;
padding:0px; border-collapse: collapse;}
.scroll { overflow:auto;}
</style>
<body>
<table class="layout" >
<tr>
<td>left</td>
<td class="layout" style="width:50%;">
<div class="layout scroll">
auto scroll content here
</div>
</td>
</tr>
</table>
</body>
</html>

looks best in safari

-- bruce (sqlwork.com)
Click to expand...

Thanks but that provides me with two scroll bars at the bottom and the
vertical scroll bar is not seen depending on what size the browser opens to
unless you scroll the second or is it the first scroll bar. Mucho ugly.

<rant class="WTF">
I cannot believe that such a simple thing takes so much effort. I
appreciate all the replies. I have been googling and reading CSS and HTML
books but this seems beyond the scope of normal man.

How does anyone deal with HTML as a presentation platform. What takes about
10 seconds in Winforms is a PHD level CSS/HTML/Javascipt cludge in web
development.

</rant>

Thanks
LS
 
A

Anthony Jones

bruce barker said:
if you use xhtml or html 4.0 doctypes then:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<table style="height:100%;width:100%;">
<tr>
<td style="background-color:red"> </td>
</tr>
</table>
</body>
</html>

then the td will be the width of the page, but only 1 line space high. this
is because in the w3c standard there is no default height to a body, so the
heigth:100% is ignored. you must specify an absolute height, or use
javascript to set the height to the viewport size.
Click to expand...


Try this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%; overflow:hidden">
<body style="height:100%; overflow:hidden; margin:0px" scroll="no">
<div style="height:100%; width:50%; overflow:auto; float:left">
Long Content<br />
A<br /><!-- Repeat this -->
</div>
<div style="height:100%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br /><!-- Repeat this -->
</div>
</body>
</html>

The key thing is to give the html element 100% height which will give it the
height of the viewport. From there child elements with 100% will take the
height of the parent element.

The table approach however fails in FF. The above works in IE and FF.
 
L

Lloyd Sheen

Anthony Jones said:
Try this:-

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html style="height:100%; overflow:hidden">
<body style="height:100%; overflow:hidden; margin:0px" scroll="no">
<div style="height:100%; width:50%; overflow:auto; float:left">
Long Content<br />
A<br /><!-- Repeat this -->
</div>
<div style="height:100%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br /><!-- Repeat this -->
</div>
</body>
</html>

The key thing is to give the html element 100% height which will give it
the
height of the viewport. From there child elements with 100% will take the
height of the parent element.

The table approach however fails in FF. The above works in IE and FF.
Click to expand...


Got it to work with table and a Panel (div). I also added code to handle
resizing the window. The code for each is below. Thanks to all that
helped.

One last question. In googling around for the resize I notice that for both
IE and Mozilla the onresize event is not part of the standard. With the
arrival of IE 8 and its "compliance" with standards does this mean it will
stop working?

Page Markup:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb"
Inherits="_Default" ValidateRequest="false" viewStateEncryptionMode
="Never"%>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="cc1" %>
<%@ Register Src="SPDWs/TSQLScript.ascx" TagName="TSQLScript"
TagPrefix="uc2" %>
<%@ Register Src="Navigator.ascx" TagName="Navigator" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>

<body onload="SetSizes();" onresize="SetSizes()">

<script type="text/javascript">
var tp;
var cw;
var dv;
var dvc;
var wi;

function SetSizes()
{
//debugger;
dvc=document.getElementById(dv);
wi=document.body.clientWidth;
tp=wi-256-30+'px';
dvc.style.width=tp;
}

</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;
height: 100%">
<tr>
<td id="NavigatorColumn" style="vertical-align: top; width:
256px">
<uc1:Navigator id="Navigator1" runat="server">
</uc1:Navigator>
</td>
<td style="vertical-align: top; height:700px">
<cc1:TabContainer ID="ObjectContentTabs" runat="server"
ActiveTabIndex="0">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Object
Script">
<ContentTemplate>
<uc2:TSQLScript ID="TSQLScript1" runat="server"
Visible="true" />
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer></td>
</tr>
</table>
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
&nbsp;<span style="font-size: 7pt">.<img alt=""
src="Images/TimeClock.gif" />. Getting
Info</span>
</ProgressTemplate>
</asp:UpdateProgress>
</form>
</body>
</html>


Web Control Markup:

<%@ Control Language="VB" AutoEventWireup="false"
CodeFile="TSQLScript.ascx.vb" Inherits="SPDWs_TSQLScript" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"
TagPrefix="ajaxToolkit" %>
<%@ Register Assembly="ActiproSoftware.CodeHighlighter.Net20"
Namespace="ActiproSoftware.CodeHighlighter"
TagPrefix="cc1" %>

<script type="text/javascript" >
//debugger;
dv='<%=theScript.ClientID%>';
</script>

<asp:UpdatePanel ID="UpdatePanel4" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:panel ID="theScript" runat="server" style="height:700px; overflow:
auto">
<pre style="text-align: left ">
<cc1:CodeHighlighter ID="CodeHighlighter1" runat="server"
LanguageKey="SQL">
</cc1:CodeHighlighter>
</pre>
</asp:panel>
<textarea id="holdtext" cols="1" rows="2" runat="server" style="display:
none"></textarea>
</ContentTemplate>
<Triggers>
</Triggers>
</asp:UpdatePanel>
 
A

Anthony Jones

Lloyd Sheen said:
Got it to work with table and a Panel (div). I also added code to handle
resizing the window. The code for each is below. Thanks to all that
helped.

One last question. In googling around for the resize I notice that for both
IE and Mozilla the onresize event is not part of the standard. With the
arrival of IE 8 and its "compliance" with standards does this mean it will
stop working?
Click to expand...

That's a really good question. However I can't see MS disabling things
because there not defined by a standard. They are aiming to make sure that
where there is a standard they comply with it. If your target is IE only
then I doubt you need to worry. If you want this stuff to work on FF as
well then you'll struggle. BTW, the floating DIVs work on IE6, 7 and FF2,
3. They resize quite happily without any code intervention.
 
L

Lloyd Sheen

Anthony Jones said:
That's a really good question. However I can't see MS disabling things
because there not defined by a standard. They are aiming to make sure
that
where there is a standard they comply with it. If your target is IE only
then I doubt you need to worry. If you want this stuff to work on FF as
well then you'll struggle. BTW, the floating DIVs work on IE6, 7 and FF2,
3. They resize quite happily without any code intervention.
Click to expand...

Thanks for all your help
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Having trouble centering contents of td ? 3
Getting vertical scroll bar in a table cell 2
Freezing <Td> and <TR> 3
Scroll bar in Grid View 2
Sort by number of characters 1
SendGrid email issue in responsive Gmail 1
Programmatically Scroll GridView Control 1
expand <td> to height of its iframe contents 1

Members online

No members online now.
Total: 64 (members: 1, guests: 63)
Robots: 505

Forum statistics

Threads
473,995
Messages
2,570,228
Members
46,818
Latest member
SapanaCarpetStudio

Latest Threads

Top