Bootstrap 4 - Table Buttons - small device
Bootstrap 4 - Table Buttons - small device
btree
Posts: 99Questions: 14Answers: 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
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
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
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:
Cheers
Hannes