Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Firefox displays unnecessary horizontal scrollbar

Tags:

html

The effect I'm trying to achieve is this: I'd like to have a line of text with a title, and underneath that I want a table. The table is likely to be too high to fit in the browser window, so I'd like a vertical scrollbar if necessary. The table shouldn't be too wide, so no horizontal scrollbar should be needed (but I'd still like it to show up if necessary). Either way, I don't want the title to scroll; thus, a vertical scrollbar shows up and I scroll the table, the title should be fixed. I'm trying to set up a <div> whose width is whatever width the browser decides is needed to display the table (the title will be less wide than that).

Here's what I've tried:

<html>
   <head>
      <title>Page title</title>
      <style type="text/css">
         .mytab { border-style: solid; border-collapse: collapse }
         table.mytab td { border-style: solid; border-width : 1px;
                           padding: 5px }
      </style>
   </head>
   <body>
      <div style="display: inline-table">
          <div style="padding-bottom: 10px; text-align: center">Table title</div>
          <div style="height: 100px; overflow: auto">
              <table class="mytab">
              <tr><th/><th>Data1</th><th>Data2</th><th>Data3</th></tr>
                  <tr><td>AAAA</td><td>12348173</td><td>7598734</td><td>zioxuoiuf</td></tr>
                  <tr><td>BBBB</td><td>29834782</td><td>7895232</td><td>kuoiu2kjf</td></tr>
                  <tr><td>CCCC</td><td>98291123</td><td>io242o2</td><td>982734211</td></tr>
              </table>
          </div>
          </div>
   </body>
</html>

(I'll eventually want to allow more than 100px for the height of the table, but I set it so that I could test the scrollbar.)

This does what I want in Chrome (53.0.2785.116 m), but not in Firefox (49.0.1). In Chrome, it appears that the browser figures out how wide to make the table, then adds a vertical scrollbar to the right of that. In Firefox, it appears that the browser figures out how wide to make the table, but then positions the vertical scrollbar inside a box of that width, obscuring part of the table. Then it appends a horizontal scrollbar since you can't see all of the table.

Appearance with Chrome:

Appearance with Chrome

Appearance with Firefox:

Appearance with Firefox

(It doesn't matter to me that Firefox is displaying a bit less of the table vertically. But I definitely don't want the horizontal scrollbar to show up unless it's necessary.)

How can I fix this so it works in Firefox?

like image 930
ajb Avatar asked Sep 28 '16 04:09

ajb


People also ask

Why does horizontal scrollbar appear?

Web browsers do not take into account the width of the scrollbar on the side of a page when computing width values, so since we have a page that is longer than a single viewport, part of our page is being rendered behind the vertical scroll bar, causing the browser to display a horizontal scroll bar.

How do I change the default scrollbar in Firefox?

Nevertheless, you can still change that browser's scrollbar style to different alternatives within the browser's about:config (Advanced Preferences) menu. This is how you can customize Firefox's scrollbar style by changing a hidden flag on Firefox's Advanced Preferences tab.

How do I get rid of the scroll bar in Firefox?

use css overflow hidden on html, body and use a wrapper div with 100% height and width.


2 Answers

We have encountered this problem frequently in our work here. It seems that Mozilla simply renders differently than Chrome.

By inspection, I was able to fix the formatting problem by adding 16 pixels of right padding to the innermost <div> which contains the table. As you can verify for yourself, this effectively adds enough space for the vertical scrollbar such that the horizontal scrollbar will not appear.

The only issue is that this pushes the scrollbar too far to the right in Chrome. So I added a check in the CSS to apply the style only to Mozilla browsers. I tested in Chrome and Mozilla and it looks fine.

<style type="text/css">
     .mytab { border-style: solid; border-collapse: collapse }
     table.mytab td { border-style: solid; border-width : 1px;
                       padding: 5px }
     @-moz-document url-prefix() {
         .moz-div { padding-right: 16px; }
     }
</style>


<div class="moz-div" style="height: 100px; overflow: auto">

By the way, the problem in Mozilla also appears in IE (at least IE 10), so you should check across all browsers and devices, and update your CSS accordingly.

like image 162
Tim Biegeleisen Avatar answered Oct 30 '22 14:10

Tim Biegeleisen


Not ideal, but here's a simpler option that might be good enough in most scenarios.

div {
  overflow-x: hidden;
}

th:last-child,
td:last-child {
  padding-right: 16px;
}
like image 29
James Nuanez Avatar answered Oct 30 '22 15:10

James Nuanez