Bootstrap 4 - Table Buttons - small device

btree

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

colin

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

btree

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

btree

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