Unwanted horizontal scrollbar

galcott

I have a table where I want vertical scrolling but no horizontal scrolling. However, by setting a value for scrollY, a horizontal scroll bar is also displayed and I can't find a way to get rid of it. Apparently the horizontal bar is added to account for the space taken up by the vertical bar, so the horizontal scroll available is only a few pixels. This is completely unnecessary and doesn't look good. Is there a way to get rid of the horizontal scroll? Here is the table code:

dtFormulas = $('#tblFormulas').DataTable({
  ajax: 'sqlprocs.asp?proc=getformulas',
  dom: '<"top"f>rt<"bottom"ip><"clear">',
  scrollY: '350px',
  scrollX : false,
  scrollCollapse : true,
  paging: true,
  pageLength: 15,
  pagingType : 'full',
  select: {style: 'single'},
  columnDefs: [ {
    targets: 2,
    data: null,
    width: '50px',
    defaultContent: '<image src=edit.png title="Edit" class=editformula_png>&nbsp;<image src=delete.png title="Delete"   class=deleteformula_png>'
   } ]
});

allan

Can you give me a link to a page showing the issue please?

Thanks,
Allan

galcott

Allan,
You can see it on this page.
galcott.com/HerbPharmacy/herbs.asp?data=test1_

Go to the Formulas tab and click on formula "ABC1". You'll see it on both tables. You can also see it on the table on the Patients tab. And the Ingredients and Patients tables don't even have a vertical scroll, which I hadn't noticed before.

galcott

Allan,

Just a reminder to take a look at the link I gave you a few days ago. Thanks.

allan

Hi,

Sorry for the delay.

I've just tried it in Chrome 59 and I don't see any horizontal scrollbar. What browser is it that you are using?

Having said that, the tables are initialised hidden. When that is being done you need to call columns.adjust() when the table is made visible. Are you doing that? (Sorry, I haven't looked through to code to check it).

This example shows it being done with Bootstrap tab (you'd need to use the jQuery UI tab show event instead).

Allan

galcott

I'm using Firefox 53 and I also checked IE 11. It happens in both of those, but I confirmed that it doesn't happen in Chrome or in Dolphin (Android browser). I am calling columns.adjust(). So if this is a browser issue there's probably not too much to be done about it.

allan

If you disable the custom scrollbar styling (which I see in Firefox but not Chrome), does that resolve it?

Allan

galcott

What custom scrollbar styling are you talking about? Is this some Firefox option?

allan

My mistake sorry. Firefox is doing something slightly odd with the styling of the scrollbars which I haven't recognised before. Good old Linux where everything is different in every application...

In your CSS you have:

table, td {
    border: solid 1px;
    border-color: #999999;
    border-collapse: collapse;
    font-size: 10pt;
}

Could you remove the border of 1px from the table (perhaps just remove the table, part of the selector) and see if that resolves it?

Thanks,
Allan

galcott

Removing the border was a bit too drastic since it removed all table borders on the page. But I set the left and right borders of the affected tables to none and that fixed it. By the way I'm on Windows, not Linux! I'm surprised you mentioned it as an OS issue rather than a browser issue. Anyway, thanks for the suggestion.

allan

Try this then:

table.dataTable {
  border: none;
}

By the way I'm on Windows, not Linux! I'm surprised you mentioned it as an OS issue rather than a browser issue.

You might be using Windows, but I'm using Linux and that's where I made my mistake. Firefox doesn't use the same scrollbars as a number of applications I'm running at the moment, hence why I thought they were custom. That isn't the case.

Allan