Make content in <td> scroll

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

Lloyd Sheen - 18 Mar 2008 17:12 GMT

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

Reply to this Message

Mike - 18 Mar 2008 17:43 GMT

add a div tag around the table?
something like

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

(something like that)

>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
[quoted text clipped - 6 lines]
>
> Lloyd Sheen

Reply to this Message

Anthony Jones - 18 Mar 2008 17:51 GMT

> 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.

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.

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

Lloyd Sheen - 18 Mar 2008 18:02 GMT

>> 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
[quoted text clipped - 11 lines]
>
> What DTD does the page use? The meaning of height differs between modes.

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

Reply to this Message

bruce barker - 18 Mar 2008 18:27 GMT

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)

> >> 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
[quoted text clipped - 22 lines]
> Thanks,
> LS

Reply to this Message

Lloyd Sheen - 18 Mar 2008 19:25 GMT

> if you use xhtml or html 4.0 doctypes then:
>
[quoted text clipped - 51 lines]
>> Thanks,
>> LS

I suppose that is the same for the width??

Thanks
LS

Reply to this Message

bruce barker - 18 Mar 2008 20:40 GMT

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)

> > if you use xhtml or html 4.0 doctypes then:
> >
[quoted text clipped - 56 lines]
> Thanks
> LS

Reply to this Message

Lloyd Sheen - 18 Mar 2008 21:23 GMT

> no, you can use 100% width. this probably does what you want:
>
[quoted text clipped - 91 lines]
>> Thanks
>> LS

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

Reply to this Message

Anthony Jones - 19 Mar 2008 08:50 GMT

> if you use xhtml or html 4.0 doctypes then:
>
[quoted text clipped - 14 lines]
> heigth:100% is ignored. you must specify an absolute height, or use
> javascript to set the height to the viewport size.

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 />
</div>
<div style="height:100%; width:50%; overflow:auto; float:right">
Long Content<br />
B<br />
</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.

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

Lloyd Sheen - 19 Mar 2008 14:21 GMT

>> if you use xhtml or html 4.0 doctypes then:
>>
[quoted text clipped - 40 lines]
>
> The table approach however fails in FF. The above works in IE and FF.

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>
 <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>

Reply to this Message

Anthony Jones - 19 Mar 2008 17:25 GMT

> >> if you use xhtml or html 4.0 doctypes then:
> >>
[quoted text clipped - 49 lines]
> arrival of IE 8 and its "compliance" with standards does this mean it will
> stop working?

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.

Signature

Anthony Jones - MVP ASP/ASP.NET

Reply to this Message

Lloyd Sheen - 19 Mar 2008 18:11 GMT

>> >> if you use xhtml or html 4.0 doctypes then:
>> >>
[quoted text clipped - 62 lines]
> well then you'll struggle. BTW, the floating DIVs work on IE6, 7 and FF2,
> 3. They resize quite happily without any code intervention.

Thanks for all your help

Reply to this Message

Peter May - 20 Mar 2008 09:49 GMT

Lloyd Sheen pisze:
[...]

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

If You don't serve your xhtml as application/xhtml+xml then You don't
need xhtml. Just use simple HTML, for example Strict version. See
http://www.w3.org/MarkUp/2004/xhtml-faq

Signature

Peter

Reply to this Message

Masudur - 18 Mar 2008 17:58 GMT

> 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
[quoted text clipped - 6 lines]
>
> Lloyd Sheen

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;">
 
</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

Reply to this Message

Rate this thread:

Make content in <td> scroll

Free Magazines