Overflow:auto creating unnecessary scrolls

[tryin_to_learn]

I could probably spend a couple of hours and figure this out but I’m on a time crunch and am hoping to get some hints to point me in the right direction.

I have several nested divs with the inner one holding a data table that can get fairly wide. I’ve got overflow:auto on the outer div so the user can still access the data in the table at all resolutions. Problem is, on many (but not all) of these pages, the horizontal scroll is there even when it’s not necessary. There are 4 or 5 of us that have worked on these pages over a course of several years so the code is NOT consistent. Some divs have a width of 100%, some have 90%, some have fixed widths like 800px or 940px. Seems like the unnecessary horizontal scroll is appearing, regardless of what the width is. I’m hoping to clean up the code on all of these but so far, I can’t figure out how to get rid of that unnecessary scroll. I’d really like it to be set by the user’s resolution rather than give it a fixed width.

Anyone have any general ideas of what might be causing this to get me started?

[RyanReese]

I’m not a fan of pin the tail on the donkey.

Could we see a live website so I can take off the blindfold?

[tryin_to_learn]

It’s a healthcare application so I can’t let you into a live site because of HIPAA. Here’s a test site - the only problem is that it doesn’t have a lot of data:

https://test.psybooks.com/login.php
un/pw: jane2/test777

Once you’re in, go to Tools > Reports. These are the pages I’m talking about - the reports that get generated when you click a report name on the left, then fill out the filters on the right and generate the report. I’m not sure how effective it will be since there’s so little data but this is just a test site so you’ll welcome to add anything you want. The unwanted scrollbars are appearing on most reports on the bottom right (i.e., where the actual report gets generated).

An example is the Account Activity by Client report. Choose client: “Jake Brown”, Date: Current Year.

[RyanReese]

Following those instructions, I don’t get any scrollbars at all on that page. Using Chrome.

Is this browser-specific?

[tryin_to_learn]

I guess so! Sorry - I hadn’t noticed that. I mostly use FF. It’s happening there.

[ralphm]

@tryin_to_learn

jane2/test777

The padding on the table is adding to its width. Perhaps the easiest solution is to add this to your CSS:

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

If that causes any other layout issues, then apply it just to the tables.

[tryin_to_learn]

That is brilliant. I’m not sure what padding you’re talking about. I tried removing all padding from the th and td on that table and the issue still exists. I tried adding a padding:0 to the table itself - scroll is still there. I even tried removing padding from the div that holds the table - but I still have a scroll.

Your issue works perfectly as is, but it does break other stuff and I’m not sure how to apply it to just the tables. I tried these things:

#reportFilterForm table:before, #reportFilterForm table:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

#reportFilterForm table {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

What am I missing?

[ralphm]

@tryin_to_learn

What am I missing?

Actually, we are both looking in the wrong place. The real problem is the padding and width on the h3 above:

.reportForms h3.reportGoldBarTitle {
width: 98%;
padding: 12px;
}

Those two make the h3 more that 100% wide, creating the scroll bar. So you can either address that by changing the padding to %, or apply the box-sizing rule to the h3:

.reportGoldBarTitle  {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

[tryin_to_learn]

Wow! I never would have thought to check the h3! I was looking at everything around it, but not the h3. Thanks so much.