Bootstrap 4 - am I doing it wrong?

Bootstrap 4 - am I doing it wrong?

Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0
edited May 2017 in Free community support

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

Answers

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    Yes, instead of using the DataTables styling for the examples, you need to use the Bootstrap 4 styling. For example replace buttons.dataTables.min.css with buttons.bootstrap4.min.css.

    I haven't got those files advertised on this site yet since Bootstrap 4 is still in alpha.

    Allan

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    I changed the css-files but the page still looks off. Right?

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    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.

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0
    edited May 2017

    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 has style="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.

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    Can you add style="width:100%" or width="100%" to the table element 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 (responsive or a class name).

    Allan

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    I've added style="width:100%" to the table tag, included Responsive and initialized it with "responsive": true but 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?

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓

    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

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0
    edited May 2017

    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.css with?

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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.css or .bootstrap.min.css (and likewise with the JS files) replace the bootstrap bit with bootstrap4.

    Allan

  • Rawland_HustleRawland_Hustle Posts: 94Questions: 16Answers: 0

    Thanks for your help. I went with Bootstrap 3 and I'm using the download builder. Things look good now!

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    Poke @allan . Guess what! Bootstrap 4 Beta :smiley:

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    Its coming! I'm just working through a list little of things first and will update the download builder soon - hopefully tomorrow.

    Allan

  • setwebmastersetwebmaster Posts: 77Questions: 5Answers: 0

    @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!

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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

  • maliwikmaliwik Posts: 55Questions: 5Answers: 1

    Hey Allen -

    What issues are you running into with the integration?

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    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

  • setwebmastersetwebmaster Posts: 77Questions: 5Answers: 0

    @Allan, just saw the new download builder. Good job and thanks for integrating bs4!

  • maliwikmaliwik Posts: 55Questions: 5Answers: 1

    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 :smile:

  • bindridbindrid Posts: 730Questions: 0Answers: 119

    @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

This discussion has been closed.