How to fix Semanitic UI with Datatables no horizontal scroll on wide table

minifiredragon

Aside from using Jquery after the table loads, is there any setting you guys use to show the scroll bar on a wide table? I know there is the setting:

scrollX: true

But that only makes the bar appear at the very bottom of the page. So if you are looking at 1000 rows, you need to scroll all the way down, scroll over and then back to where you were.

colin

This thread has discussions about also putting the scroll at the top.

Colin

minifiredragon

That is interesting but still not a fix. It only occurs now that I have semantic ui in use with datatables (using the build from Datatables for Semantic). If you have 1000 rows you still need to scroll up and down. Datatables without semantic works fine. I was just hoping someone would have a tip on how to repeat the same styling with semantic.

kthorngren

Are you looking for the scrollY option for vertical scrolling? There are a couple examples here:
https://datatables.net/examples/basic_init/index.html

Kevin

minifiredragon

No, ScrollX. I have a 30+ cell table that is quite wide. Without the Semantic UI stuff loaded, the table will put a scroll bar on the body. When Semantic UI is loaded, it removes the scroll bar and fixes the body to the width of the window. I bypassed it currently by reading the outerWidth() of the table and making the body outerWidth() equal + 20. Which forces the scroll bar back.

Since I am very new to Semantic UI and all my searches only talked about vertical scrolling, I thought I would ask here, hoping someone has already found a semantic ui tag solution for a wide table stuffed in a short box.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

minifiredragon

I would like to, but your CDN or something is not loading Semantic UI:

http://live.datatables.net/nawepehe/2/edit?html,css,js,console,output

colin

Yep, there's something wonky when all the sources are concatinated, if they're separate it works as expected: http://live.datatables.net/nawepehe/3/edit .

I tried disabling SemanticUI there, but I'm not seeing scrolling either as the config options are missing. Coul you take a look and make it reproduce your issue, please.

Colin

minifiredragon

Actually this is the way it should be. Just pull the html panel out until it stops wrapping on the table cells, and you will see no horizontal scroll bar.

I added a few more records just to make it longer.

http://live.datatables.net/nawepehe/4/edit

PS. I removed Semantic UI and the table made the horizontal scroll bar for me.

allan

That's the Semantic UI files on our CDN fixed.

Allan

allan

Just pull the html panel out until it stops wrapping on the table cells, and you will see no horizontal scroll bar.

That's a feature of Semantic UI. From their documentation:

Tables will automatically stack their layouts for mobile devices. To disable this behavior, use the unstackable variation or tablet stackable to allow responsive adjustments for tablet.

So just add unstackable to your table classes if you don't want that behaviour.

Allan

minifiredragon

I thought someone might mention unstackable. No, it does not help at all. If anything it makes it easier to see the lack of a horizontal bar on the narrow window

http://live.datatables.net/nawepehe/4/edit

minifiredragon

After some extensive google searching and fiddling with CSS, I have come to this answer:

http://live.datatables.net/kezebete/2/edit