• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2220
  • Last Modified:

CSS overflow auto/scroll question

Hello,

I display a list of names / phone numbers inside a small layer that appears on the right side of the screen. The number of lines can be significant, I need a vertical overflow, but I don't want a horizontal one. I don't know the width of that layer because I don't know the length of the longest name.

Initially, I was not specifying the width, and it was fine, the layer adjusted exactly to the width of the largest name/phone number. But when I added the vertical overflow, it automatically took a 100% width, which I don't want. As I cant set up a fixed width, the question is how can I do to have the vertical scrolling AND an auto-adjustable width ???

1) Auto adjustable width OK, no vertical scrolling :

<div style="z-index:1; position:absolute; top:0px; right:0px; ">
<div style="background-color:silver;">
<table><tr>
<td>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg</td>
</tr></table>
</div>
</div>

2) Vertical scrolling, but width goes to 100% (!) :
<div style="z-index:1; position:absolute; top:0px; right:0px; <div style="z-index:1; position:absolute; top:0px; right:0px; overflow-x:hidden;overflow-y:auto;height:60;">
<div style="background-color:silver;">
<table><tr>
<td>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg</td>
</tr></table>
</div>
</div>

3) Vertical scrolling and auto-adjustable width = ?????
0
javilmer
Asked:
javilmer
1 Solution
 
VirusMinusCommented:
im not sure but it could be the doctype. use the strict DOCTYPE at the top of your HTML.

this seems to work. the width fits the longest row.

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

<html>
<head>
<title>Untitled</title>
</head>

<body>
<div style="z-index:1; position:absolute; top:0px; right:0px; overflow-x:hidden;overflow-y:auto;height:60px;padding-right:16px;">
<div style="background-color:silver;">
<table><tr>
<td>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg longer<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg<br>
gfdgdfgdfg gfdgdfgdfg gfdgdfgdfg</td>
</tr></table>
</div>
</div>


</body>
</html>


0
 
javilmerAuthor Commented:
thank you
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now