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

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

minifiredragonminifiredragon Posts: 55Questions: 11Answers: 2
edited January 2020 in General

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • minifiredragonminifiredragon Posts: 55Questions: 11Answers: 2

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    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

  • minifiredragonminifiredragon Posts: 55Questions: 11Answers: 2
    edited January 2020

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • minifiredragonminifiredragon Posts: 55Questions: 11Answers: 2

    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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • minifiredragonminifiredragon Posts: 55Questions: 11Answers: 2
    edited January 2020

    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.

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

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

    Allan

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • minifiredragonminifiredragon Posts: 55Questions: 11Answers: 2

    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

  • minifiredragonminifiredragon Posts: 55Questions: 11Answers: 2
    Answer ✓

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

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

This discussion has been closed.