Bootstrap 4 - Table Buttons - small device

Bootstrap 4 - Table Buttons - small device

btreebtree Posts: 95Questions: 13Answers: 11

Hi everyone,

I'm atm. migrating my page to bootstrap 4 and encounter a problem with the table buttons and don't know whats the best way to solve it.

I use following code to get the length dropdown above the buttons:

dom:             "<'row'<'col-sm-3' l >>" + "<'row'<'col-sm-12 col-lg-9' B ><'col-sm-12 col-lg-3' f >>" + "trip",   //l = length Menue, B = Buttons, f = filter (search)

Clear the automatic set classes on the buttons with this code (as I use custom classes on the buttons):

  var objDom = {
    dom: {
      button: {
        className: 'btn m-1'
      }
    },
    buttons: [obj]
  }

Now to my problem, I use quite a few buttons and they work fine on desktop. But when I use smaller devices the buttons don't make a line break:
https://i.imgur.com/cOTj43o.png
for example my old version with bootstrap 3:
https://i.imgur.com/VJSQeUP.png

I also tried to remove the col-x before the buttons and give each button their own col-x but this also don't work as expected.

Cheers
Hannes

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 6,245Questions: 0Answers: 1,073
    Answer ✓

    Hi @btree ,

    Styling is always fiddly without seeing it in action. Could you please link to a test case or link to your page. 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

  • btreebtree Posts: 95Questions: 13Answers: 11

    Hi @colin,

    sure no problem. I just created a simple test case, it's just about buttons don't make "line break".

    http://live.datatables.net/qonivasi/1/edit?html,js,output

    Cheers
    Hannes

  • btreebtree Posts: 95Questions: 13Answers: 11
    edited July 11

    Hi,

    ok found a (probably) good solution to the problem. It is the bootstrap 4 with flex. Before the buttons a div with the class buttons-group is generated by datatables. If we add to this div the class "flex-wrap" the buttons will make a line break.

    I made a small pull request on the repo, I think it would be a good addition and should not break anything.

    https://github.com/DataTables/Buttons/pull/164

    This is my "fix" for the moment:

    buttons: [
      dom: {
          conainter: {
            className: 'dt-buttons btn-group flex-wrap' 
          },
          button: {
            className: 'btn mr-2 mb-2'
          }
        }
    ]
    

    Cheers
    Hannes

Sign In or Register to comment.