[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Adding div scroll bars that don't add horizontal scroll bar to page

Posted on 2005-04-10
26
Medium Priority
?
564 Views
Last Modified: 2008-02-01
I have a page where I have essentially two divs (class="frame") that occupy the full width of the page minus 10px padding in the body tag I have their overflow set to auto. Within each of these divs are other divs (class="rowwrap") which have their width set to 100%, so when the content within them causes the outer frame div to add the verticle scroll bar, its added to the width of frame div and causes a horizontal scroll bar to be added to the page and pushes the "total width" of the div so that its verticle scroll bar is at least partially off the page. I can't change the width of rowwrap to auto because they conatain other floated left divs (The whole layout is display of tabular material without the use of tables.), and auto throws the alignment all out of wack

Is there a way to have those vertical scroll bars added inside of their divs, essentially shrinking the inner divs from 100% to something less?

Thanks
RWW

0
Comment
Question by:PstWood
  • 14
  • 11
26 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13749220
if you use overflow:scroll instead of overflow auto then then the space for the scrollbars will be allocated even when they are not need, but the width will be consistent.  The problem is that some do not like the look of that extras spece, save for the scrollbars.  

If you post a link to th epage or the code, we may be abel to see other solutions.

Cd&
0
 

Author Comment

by:PstWood
ID: 13749564
I thought of using overflow: scroll, but I don't really want or need the horizontal scroll bar (I intended to mention this in my original post). If there was a way to get rid of that, I'd go with that solution.

As to a link to the page, I'm still at the point where I'm developing this on my local machine. I can post the raw code, but it's interspersed with php "stuff" essentially it's:

<div ID="frame">  \\width not set
  <div ID="section"> \\width not set
    <div class="rowwrap"> \\width="100%" due to containing floated divs
      <div class="col1"> content <\div> \\width="xxem"
      <div class="col2"> content <\div> \\width="xxem"
      <div class="col3"> content <\div> \\width="xxem"
      <div class="col4"> content <\div> \\width="xxem"
    </div>
  </div>
</div>

Thanks,
RWW

0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 800 total points
ID: 13749637
I spen a lot of time in this topic trying to convince developers not to use tables for layout.  Here it is the opposite. You have tablular data that should be in a table.  You are having the same kind of layout management problem they have when they use tables incorrectly.  

As a table it is a no brainer... and you have all the styling to need to make it work.

The frame get a width and scroll auto.
section becomes a table tag with this styling:
style="table-layout:fixed"
rowwrap becomes a tr  do not specifiy width for it
then the four cells become the tds and get style="width:xxem"
the cells will hold the width because of the fixed table layout.

If there is any chance that the cells will overflow you can apply
overflow:hidden and the data will get truncated or you can omit overflow and the default will render the content outside the cell.  However overflow should not be a problem unless you are no wrapping the content or you have long unbroken strings that the browser cannot break.  The total width of the cells shouldbe about 25 pixels less than the total width of the page.  I would use pixels rather than em, becaue if you use em and the user changes the font size it may also change the width of the cells bcsue em refers to the size of the font to calculate dimensions.

so:

<div ID="frame" style="overflow:auto">
  <table ID="section" style="table-layout:fixed">
    <tr class="rowwrap">
      <td class="col1"> content </td>
      <td class="col2"> content </td>
      <td class="col3"> content </td>
      <td class="col4"> content </td>
    </tr>
  </table>
</div>

Everyone note the date and time...Cd& is recommending the use of a table in the CSS topic. ;^)

Cd&
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:PstWood
ID: 13751012
Well, your answer is probably the best solution, so if no one else comes up with a way to stick with my divs, I'll give you the points. I'm not going to implement the table solution for time and redesign considerations. This particular page will only be part of an administrative backend to a set of conference registration forms, and I decided I can live with reducing the frame width to 98%, which, when the scroll bars are visible gives about a 2 or 3 pixel white line down the edge of the scroll bar. If the child divisions had a white back ground, no one would even know.

Thanks anyway. Really it was just a plot to get you to admit that tables still have a place. I recently had this debate on another list and said basically what you said above that tables do have their place, for which I was soundly rebuked as being backward and uninformed because css and divs could do anything that tables can and better. Different strokes for different folks, I guess.

Thanks
RWW
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13751288
Yeah if you go through my PAQ yu will find there is no one on the site more adamant about not using tables for layout.  You will also find that I hate it when when CSS and DIV are somehow linked.  The div was part of HTML before CSS and just happen to be useful for a lot of the CSS implementation early on because browsers still lack a lot of the support necessary to use all tags correctly in CSS.

The bottom line is that HTML has a whole range of tags with their own uniques set of behaviours and each needs to be used where it belongs.  Don't use a hammer to put in screw because it is the only tool you have; learn to use a screw driver and you become a mmaster craftsman.

Cd&
0
 

Author Comment

by:PstWood
ID: 13753354
I dunno where you learned carpentry. Those little slots in the top of the nails are only for if you ever have to take them out. :-)
0
 

Author Comment

by:PstWood
ID: 13764759
Cd&,

I decided to switch over to tables for this after all, but is there a way to get the table rows to stretch the whole width of the conaining div without resizing the cols? I want the first 3 of four columns to have a set width, and the last of the four to stretch to fill up the rest of the row, primarily for appearance sake.

Thanks,
RWW
0
 
LVL 9

Assisted Solution

by:Jakob_E
Jakob_E earned 400 total points
ID: 13765368
First, for once I agree on using tables
Second, yes you can :) ...

Add this to your header (offcourse adding the widths you want):
<style type="text/css">
    #frame    { width:500px; overflow:auto}
    #section   { width:100%; }
    .col1, .col2, .col3 { width:50px; }
</style>

Delete the styles on your table (try not to use inline styles).

<div id="frame">
  <table id="section">
    <tr class="rowwrap">
      <td class="col1"> content </td>
      <td class="col2"> content </td>
      <td class="col3"> content </td>
      <td class="col4"> content </td>
    </tr>
  </table>
</div>

Best, Jakob E
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13766790
Thanks stepping Jakob.  I think the only thin we want to add to that is to use table-layout:fixed on the table style so that the browser does not resize the first three columns for a change in font-size or sme similar rendering stress.

Cd&
0
 

Author Comment

by:PstWood
ID: 13767168
Ok. I'll give this a try later tonite. Out of time at the moment. My only questions are these: Why do I want to use a pixel size for #frame width? Doesn't that mean that either the frame will only occupy a part of the screen on larger higher resolution monitors or cause horizontal scroll bars on smaller lower resolution monitors? Why wouldn't I want to resize the column width for a change in font size or rendering? The idea here is that the content fills the first three columns' widths and doesn't row wrap in column 4 until someone does something like change the text size to large. At a normal and readable resolution, the content of col4 will not fill it's width and won't wrap within the cell. The reason for wanting full width of the table within the div is that alternating rows have a different background color, and there would be no way to have the div's background mirror that. I don't have this on a live site so I can't give you a look at what I mean, so I hope you can follow my explanation.

Thanks.
RWW
0
 

Author Comment

by:PstWood
ID: 13767270
I tried it out, but using ems for the col widths and it works as I want. change in text size resizes column widths with all except col4 getting wider and col4 filling out the row and downsizing on text size increase. Thanks. works like a charm.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13767416
I think we misunderstood how you wanted the columns react.  It is a common setup to have fixed column widthes and the floater to axpand and shrink as necessary to maintian the fixed widths.  The setup you wanted is different in that you d want the fixed columns to re-size under some conditions, so the em sizing does make sense.

Thans for the A. :^)

Cd&
0
 

Author Comment

by:PstWood
ID: 13767592
Hey, I wish it was money, but hopefully the points help you out somehow.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13768620
The grade is what matters.  It means we help someone solve a problem; and that is why we are here.

Cd&
0
 

Author Comment

by:PstWood
ID: 13768634
I think I spoke too soon. The vertical scroll bar still get's pushed beyond the normal width of the div#frame, just as it did when I used all divs for the tabular data.

Grrrr... I hate web site design some days.

Thanks.
RWW
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13768641
Can you post your CSS please.

Cd&


0
 

Author Comment

by:PstWood
ID: 13768789
#frame {
  border: 1px solid #626699;
}

div#adminsection {
  background: #ffffff;
  border-bottom: #004080 solid 1px;
  border-left: #004080 solid 1px;
  border-right: #004080 solid 1px;
  height: 250px;
  overflow: auto;
}

table.guestlist {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;    
}

tr.rowwrapdark {
  background-color: #ddeff5;
  line-height: 150%;
  padding-left: 5px;
}

tr.rowwraplight {
  background-color: #eaf5f9;
  line-height: 150%;
  padding-left: 5px;
}

td.col1 {
width: 8em;
text-align: center;
vertical-align: top;
}

td.col2  {
width: 5em;
text-align: center;
vertical-align: top;
}

td.col3 {
width: 16em;
text-align: center;
vertical-align: top;
}

td.col4 {
vertical-align: top;
}

// page

<div id="frame">
  <div id="adminsection">
    <table class="guestlist">
         table rows and columns
    </table>
  </div>

  <div id="adminsection">
    <table class="guestlist">
         table rows and columns
    </table>
  </div>
</div>

HTH,
RWW
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13768814
Try this:

table.guestlist {
  border-collapse: collapse;
  table-layout: fixed;
  width: 98%;
  margin:0 auto 0 auto;  
}

If that doe not do it, Post back and I will look at it in the morning to se what kind of tweak it needs.

Cd&
0
 

Author Comment

by:PstWood
ID: 13768995
nope.

If there are not enough rows in the table to cause the scroll bars to appear, the table is now centered within the div with white space on either side. When there ARE enough rows to cause the appearance of the scroll bars, there is still a white line down the side of the scroll bar. That's essentially what I had with all div layout.

Is there any way to programatically set the table width based on whether or not it's  more than the height of the div it's in (250px) Something like "if  table height > 250, table width=(width -16px)

Sorry.
RWW
0
 

Author Comment

by:PstWood
ID: 13769300
The best I've been able to do with this so far is to make the table less than 100% width. On a 17" monitor, 98.4% shows no horizontal bar and no white line down the edge of the vertical bar.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13770768
You can set it dynamically off the load this way:

<body onload="if (document.getElementById('guestlist').offsetHeight>250) document.getElementById('guestlist').style.width=(document.getElementById('guestlist').offsetWidth - 16)+'px';">

So you can define it 100% and it will stay that way unless the height is greater then 250.  Might require a pixel or 2 adjustment

Cd&
0
 

Author Comment

by:PstWood
ID: 13774734
That works. I had to change table.guestlist to table#guestlist and on the pages where I have two tables, I'll have to add a second onload statement for table#guestlist2 (or can the js above be changed to apply to more than one ElementID?), but other than that, it seems to resolve the problem. I want to experiment, too, with an onresize event for the page being resized.

Thanks again.
RWW
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13775583
If you have two, do it this way in the head of the page:

<script type="text/javascript">
targets = new Array('guestlist', 'guestlist2');
function fixDim ()
{
   for (i=0;i<targets.length;i++)
   {
      obj=document.getElementById(target[i])
      if (obj.offsetHeight>250) obj.style.width=(obj.offsetWidth - 16)+'px';
   }
onload=fixDim;
</script>

That way if you nee another table you just add the name to the table and the script will take care of it too.

Cd&
0
 

Author Comment

by:PstWood
ID: 13776544
Hmm, that doesn't work. It gives a js error, which at first said there was a mission } which I tried both before and after onload=fixDim;  Then I tried changing onload=fixDim; to onload=fixDim(); but that made no difference either. Would this have anything to do with guestlist and guestlist2 having a width defined in the linked style sheet as 100%?

In any case, repeating what you gave me to put in the body onload tag works fine. You've more than earned the points already.

Thanks.
RWW
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 13776917
Yeah is was missing a closing brace it should be:

<script type="text/javascript">
targets = new Array('guestlist', 'guestlist2');
function fixDim ()
{
   for (i=0;i<targets.length;i++)
   {
      obj=document.getElementById(target[i])
      if (obj.offsetHeight>250) obj.style.width=(obj.offsetWidth - 16)+'px';
   }
}
onload=fixDim;
</script>
0
 

Author Comment

by:PstWood
ID: 13778618
Nope. Doesn't work. Putting the js in the body tag does, but not this way.

Again.
Don't feel obliged to put more time into this as it works the way I have it.

Thanks.
RWW
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month17 days, 22 hours left to enroll

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question