Unwanted horizontal scrollbar
Unwanted horizontal scrollbar
galcott
Posts: 53Questions: 15Answers: 1
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> <image src=delete.png title="Delete" class=deleteformula_png>'
} ]
});
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Can you give me a link to a page showing the issue please?
Thanks,
Allan
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.
Allan,
Just a reminder to take a look at the link I gave you a few days ago. Thanks.
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
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.
If you disable the custom scrollbar styling (which I see in Firefox but not Chrome), does that resolve it?
Allan
What custom scrollbar styling are you talking about? Is this some Firefox option?
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:
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
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.
Try this then:
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