How do you force horizontal scrolling for an entire page display? 1

[pkskytektip]

How do you force horizontal scrolling for an entire page display? I have tried the following solutions after a search in Google:
[ul][li]Adding "min-width: 1500px" to the body style. This worked in a sample page, but not in my published page.[/li]

[li]Adding "overflow:scroll" to either the body or table tag.[/li]

[li]Adding "min-width" style settings to different tags, including the body and table tags.[/li]

[li]I have tried wrapping everything under the body in a div tag with an id class set to "min-width: 1500px".[/li][/ul]

None of these work reliably. What is the bottom line on forcing horizontal scrolling for an entire page display?

Any and all tips or clues would be appreciated.

 

[vacunita]

body{
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}

Then it will never wrap and force the horizontal scroll.

Otherwise, by default, browsers wrap text down when they run out of space, rather than engaging scrolling.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[pkskytektip]

body {
  overflow-x:scroll;
  overflow-y:hidden;
  white-space:nowrap;
}

Very strange. This doesn't work. And not only that, but the "white-space:nowrap;" entry crashes my Dreamweaver 8, right away if one of the pages using the CSS style sheet with entry is open. It closes it right up. It also crashes if I try to open a page using that style sheet.

I have noticed some changes and it suggests a clue to the problem is that one of the tables is styled to be "position:fixed". The other table is to be aligned with the other table so that it can be scrolled underneath it. The fixed table is a reference to the vertically scrollable table.

And, I want to be able keep both tables fixed in scale and the user is to scroll horizontally to look at data that is posted too wide for the screen.

 

[vacunita]

Never rely on Deamweavers interpretation of the CSS and HTML.

It should not be crashing anything though as it is completely valid. Even IE supports it.

You hadn't mentioned anything about tables. The posted code acts on regular text. Like spans and paragraphs inside the body to avoid wrapping.

If you have tables then you have to apply the nowrap to the table.

If you have tables I'd need to see a sample, as the tables would theoretically just expand with their contents and engage the scrolling. But as an example this should give you an idea:

<style>
body{
overflow-x:scroll;
overflow-y:hidden;
}

table{
white-space:nowrap;
}

td {
border:1px solid #DDDDDD;
background-color:#888888;

}

</style>
<table style="border:1px solid #DDDDDD;";>
<tr><td stye="width:100px; height:30px; overflow:hidden;">This is the cell contents that 

should fit in the provided cell. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Duis malesuada aliquam elit, sit amet pretium dui sagittis ac. Morbi euismod, lectus nec 

dictum cursus, urna sem hendrerit turpis, id hendrerit metus lorem varius nunc. Aenean 

ipsum libero, adipiscing sit amet vestibulum nec, malesuada eu velit. Mauris ac lectus est. 

Quisque ac erat vel nunc lacinia scelerisque. Maecenas elit libero, pretium ac scelerisque 

ac, egestas in dui. Donec fringilla, sem in rutrum sollicitudin, orci lectus convallis 

erat, eget egestas ipsum sapien eget elit. Nulla libero orci, tempor ac suscipit eget, 

vulputate nec nulla. Ut eu mi scelerisque diam vulputate dictum nec consectetur erat. 

Quisque interdum, sem eu tincidunt tincidunt, purus mauris vestibulum nibh, at eleifend 

lorem sem ut turpis. Integer et fermentum nisl. Aliquam posuere tellus in felis auctor 

auctor. Maecenas ante leo, viverra in auctor sed, tempus vitae libero. Sed lorem magna, 

porta vitae ornare eu, placerat ac purus. In sed nulla diam. Nam tincidunt turpis blandit 

odio tristique tempus. Vivamus fermentum, arcu eu tristique blandit, libero orci pretium 

turpis, sed sagittis purus mauris condimentum lacus. Morbi metus nunc, vehicula eu gravida 

at, varius sit amet ipsum. Proin a est tortor, sit amet consectetur libero.

Ut vel turpis ligula. Duis faucibus lacus et turpis tincidunt at fermentum purus 

ullamcorper. Maecenas quis arcu vitae dui mollis fringilla. Fusce facilisis, leo a egestas 

volutpat, mi mi sollicitudin nibh, at hendrerit justo mi ac eros. Aenean ultricies placerat 

urna, non porta purus porttitor non. Nam interdum neque non dolor hendrerit egestas 

tincidunt urna vestibulum. Nulla facilisi. Sed pretium posuere diam dignissim malesuada. 

Praesent mattis auctor dapibus. Sed eleifend ornare luctus. Suspendisse dapibus fermentum 

sapien vel ornare. Nullam varius, enim sit amet dignissim mattis, purus elit vestibulum 

turpis, et aliquam tortor eros nec urna. Donec feugiat, felis sit amet pulvinar ultrices, 

enim magna venenatis mauris, a ornare erat augue nec ante. Duis in tincidunt tellus. In ac 

mi non dolor molestie blandit vel ut sem. Donec laoreet mi vehicula leo tristique 

adipiscing. Curabitur neque tortor, dignissim nec pretium non, tempus id mi. Ut id lacus 

quis sapien mattis fermentum in in purus. Quisque eget venenatis arcu. Curabitur non arcu 

eget quam iaculis rhoncus.

Aenean eu sagittis lorem. Sed tincidunt pulvinar felis sit amet lacinia. Aliquam ultricies 

sodales tortor at malesuada. Phasellus quis velit nec enim imperdiet aliquam. Cras quis 

adipiscing lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 

cubilia Curae; Morbi viverra condimentum tortor, at bibendum eros elementum vitae. Sed 

sapien lacus, adipiscing ut pretium id, molestie in augue. Integer vel ornare sapien. 

Curabitur ac lorem erat. Praesent mi sem, ultricies sit amet pharetra eget, commodo non 

mauris. Etiam urna metus, varius in venenatis eget, porttitor non mauris. Donec sed turpis 

vel turpis ullamcorper aliquam. Proin turpis eros, egestas a tristique ac, congue et lorem. 

</td><td>Another cell with </td><td>Very little content</td></tr>
</table>

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[pkskytektip]

Vacunita, I think I see how the code works in your sample, but I don't want to depend on table content to force horizontal scrolling. This is why I address the issue at the page display level.

Setting the min-width and max-width at the body level seems to work on the sample you provide. But it does not work on my particular page. Why would it not work? Is there some other setting not related to specificity or precedence that would supercede it?

 

[pkskytektip]

I've figured out the difference between my tables and the sample tables. If you set the postion style for either fixed or absolute, then the table will no longer force scrolling, they will adjust to window size, even independentally of a table that is forcing horizontal scrolling.

My reference says, "... elements positioned with fixed or absolute generate a block level box no matter what kind of element it is." (CSS Pocket Reference) Is this the problem? Does it point to a solution?

 

[vacunita]

But its the table content that will produce the scrolling. If the table is wider than the available area, then it will scroll. Otherwise it won't. So you need to rely on the table.

The position:fixed kills the scrolling because it makes the table an absolutely positioned element, which no longer has any bearing on its parent's dimensions, it doesn't affect them. So the parent, that is the body element, no longer has any reason to scroll. I would question the need to actually fix the tables. Its not like they are going to move.

Furthermore if you don't apply the white-space:nowrap to the table cells, it will make the tables compress the columns to fit as many as possible in the space available. Which may end up squishing the contents.




----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

 

[pkskytektip]

Vacunita, thank you for those excellent clues, but they are in no way a solution for my basic problem:

"How do you force horizontal scrolling for an entire page display? ... What is the bottom line on forcing horizontal scrolling for an entire page display?

 

[pkskytektip]

This is the only thing that I have been able to get going for my desired effect.

Notice that the bottom table scrolls up underneath the top table. This is the thing that I am striving for.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{min-width:1000px; max-width:1000px;overflow-x:scroll;}
#A {
	min-width:1000px; max-width:1000px;overflow-y:scroll;overflow-x:scroll;
	position:fixed;
	z-index:2;
	left: 10px;
	right: 10px;
	top: 10px;
}
#B {
	min-width:750px; max-width:750px;overflow-y:scroll;overflow-x:scroll
	z-index:1;
	left: 10px;
	top: 120px;
	position: absolute
}
td {border:1px solid #DDDDDD;background-color:#FFCC99;}
</style></head>

<body>
<table id="A" style="border:3px solid #FF0000;";>
<tr>
<td>This is the cell contents that should fit in the provided cell. 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis malesuada aliquam elit, sit amet pretium dui sagittis ac. Morbi euismod, lectus nec dictum cursus, urna sem hendrerit turpis, id hendrerit metus lorem varius nunc. Aenean ipsum libero, adipiscing sit amet vestibulum nec, malesuada eu velit. Mauris ac lectus est. vehicula leo tristique adipiscing. Curabitur neque tortor, dignissim nec pretium non, tempus id mi. </td>
<td>Another cell with </td>
<td>Very little content</td>
</tr>
</table>
<table  id="B" border="1">
  <tr>
    <td>&nbsp;</td>
    <td>Nullam varius, enim sit amet dignissim mattis, purus elit vestibulum turpis, et aliquam tortor eros nec urna. Donec feugiat, felis sit amet pulvinar ultrices, enim magna venenatis mauris, a ornare erat augue nec ante. </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Nullam varius, enim sit amet dignissim mattis, purus elit vestibulum turpis, et aliquam tortor eros nec urna. Donec feugiat, felis sit amet pulvinar ultrices, enim magna venenatis mauris, a ornare erat augue nec ante.</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Nullam varius, enim sit amet dignissim mattis, purus elit vestibulum turpis, et aliquam tortor eros nec urna. Donec feugiat, felis sit amet pulvinar ultrices, enim magna venenatis mauris, a ornare erat augue nec ante. </td>
  </tr>
  <tr>
    <td>Nullam varius, enim sit amet dignissim mattis, purus elit vestibulum turpis, et aliquam tortor eros nec urna. Donec feugiat, felis sit amet pulvinar ultrices, enim magna venenatis mauris, a ornare erat augue nec ante. </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>Nullam varius, enim sit amet dignissim mattis, purus elit vestibulum turpis, et aliquam tortor eros nec urna. Donec feugiat, felis sit amet pulvinar ultrices, enim magna venenatis mauris, a ornare erat augue nec ante. </td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>Nullam varius, enim sit amet dignissim mattis, purus elit vestibulum turpis, et aliquam tortor eros nec urna. Donec feugiat, felis sit amet pulvinar ultrices, enim magna venenatis mauris, a ornare erat augue nec ante. </td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

Does anyone else have any ideas?

 

[Vragabond]

I must admit I am overly confused about what you want to achieve. And I think you're overly complicating matters. A clear indication of that is setting a minimum width and maximum width at the same number. If minimum width equals maximum width, that is just width then. No need for two separate properties.

I also wonder if you need a table. Your example data does not seem like it needs a table.

Finally, I don't know if you need two tables, and definitely not sure if you need a fixed and absolutely positioned tables.

Your initial question, what forces horizontal scrolling has a very simple answer: an element, that has a width wider than the viewport (browser window). However, that is clearly not your issue. Why don't you explain slowly and in detail what is it you're trying to achieve. And this of just the task, don't focus on methods you've tried. Only then can we adequately help you.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]