Bootstrap 4 - am I doing it wrong?
Bootstrap 4 - am I doing it wrong?
Rawland_Hustle
Posts: 94Questions: 16Answers: 0
I'm trying to use DataTables with Bootstrap 4 but my page looks weird and it isn't responsive. The checks in the checkboxes looks too big and misplaced, the buttons doesn't seem right and the table columns aren't adjusting to the content width.
Am I using the wrong js/css-files?
http://themeadow.se/webbtidbokning
Thank you!
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
Yes, instead of using the DataTables styling for the examples, you need to use the Bootstrap 4 styling. For example replace
buttons.dataTables.min.csswithbuttons.bootstrap4.min.css.I haven't got those files advertised on this site yet since Bootstrap 4 is still in alpha.
Allan
I changed the css-files but the page still looks off. Right?
Looks like the integration stylesheet isn't coping very well with the table-small class I'm afraid. I'll look into getting that fixed.
Allan
Okay. I removed the class "table-sm" from my table and it looks slightly better but the page is still not responsive, it doesn't fit to mobile devices. Also the columns doesn't adjust to it's content and the checkmarks are huge.
To problem with the columns not adjusting to it's content seem to originate from the fact that
style="width: (some value)px;"is added to the table headings. The same goes for the table itself, it hasstyle="width: 1064px;"added to it. Can I stop this property from being added?However, the main problem remains even if I remove those style tags; the page isn't responsive. The top nav bar and the table stretches far to the right.
Can you add
style="width:100%"orwidth="100%"to thetableelement please. It is basically impossible (/exceptionally hard) to read percentage values from stylesheets, which is why it needs to be applied to the table tag.It also appears that you don't have Responsive on your page. Nor is it enabled by either the options (
responsiveor a class name).Allan
I've added
style="width:100%"to the table tag, included Responsive and initialized it with"responsive": truebut unfortunately that didn't do anything except adding extra sorting arrows.I don't necessarily need to use Bootstrap 4, I can just as well use Bootstrap 3 if you think that will solve my problems?
Looks like you have loaded the DataTables core styling (
https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css) rather than Bootstrap Responsive styling.Bootstrap 3 will help since you can then use the download builder and select the options and extensions you want and it will give you a single URL for a stylesheet and a single URL for Javascript, having compiled the files you need together. No mucking around with trying to get the right files!
Allan
Okay, I'll try Bootstrap 3! But first I want to try and use the correct styling for Bootstrap 4 and see if that solves the problem. Exactly which css (url) do you mean I should replace
https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.csswith?What I'd suggest is that you use the download builder to select all the options you want, select the individual files option and then wherever you see
.bootstrap.cssor.bootstrap.min.css(and likewise with the JS files) replace thebootstrapbit withbootstrap4.Allan
Thanks for your help. I went with Bootstrap 3 and I'm using the download builder. Things look good now!
When Bootstrap 4 comes out of alpha I'll be including it in the download builder. Things have already broken majorly in the alpha series. I think they said it wouldn't again, but that's the main reason why I've not included it in the download builder yet.
Allan
Poke @allan . Guess what! Bootstrap 4 Beta
Its coming! I'm just working through a list little of things first and will update the download builder soon - hopefully tomorrow.
Allan
@Allan, sorry for poking, any update on that matter? As of now I got it working by loading all files individually or local files for those that I had to customize, but I'm eager to use the download builder to get all files in one
Thanks in advance and great job, this is a wonderful plugin!
Its still coming. I think I've got most of the ducks in a row now. There are updates to make to the download builder, but hopefully that won't take long. Should be done by tomorrow. This time. I think. Probably.
Allan
Hey Allen -
What issues are you running into with the integration?
None. Its purely that I need to update the download builder, and if I do that I might as well release the latest software. And if I do that I might as well fix any outstanding bugs. While still answering support questions.
Its taking a little while to get everything done. But I'm working on the deploy just now. The download builder will include Bootstrap 4 shortly.
Allan
@Allan, just saw the new download builder. Good job and thanks for integrating bs4!
Thanks a ton Allen! Good to see you're still committed to this and doing well even 8 years after I started using your creation. Keep up the great work
@Allen My current project went to Bootstrap Four right when the beta released. I had already coded the Data Tables in anticipation of your effort. It all works but, of course, it looked funny because your data table bs4 css did not exist yet.
I used the new down loader today to drop in DataTables w/bs4. Worked perfectly without having to change any code or css.
Great Job Allen, Thanks
Scott