How to remove bootstrap from my Datatables app?

TomBajzek

I've built an app using Datatables / Editor that works very nicely, but I think I'm not benefitting much, if at all, from having used Bootstrap to style it. Since I have not knowingly made any specific uses of Bootstrap features, I'm considering removing Bootstrap to see what the result would be. I tried renaming the Bootsrat library files (by renaming them on the server), but when I did this, the editor panels appeared in the wrong location, and unstyled, although everything else apeared to be OK. So, I've concluded that the Editor library, as configured, is expecting to use Bootstrap, so I must have to do more to remove that dependency.

How would I go about that, and would there actually be any benefit from doing that now (other than reducing code size and inherent complexity)?

Thanks,
Tom

kthorngren

You should read through the styling docs to see the required files. Basically you would need to replace the Datatables Bootstrap styling includes with the default styling includes. For example instead of dataTables.bootstrap.css you will need to load dataTables.css.

The easiest way to obtain the correct files is using the Download builder.

Kevin

TomBajzek

Thanks for the recommendation. I tried other styling and disconvered two things:

1. Without Bootstrap, the editing panels appear below the rest of the page, without their background.
2. The page layouts I made using Bootstrap do not look at all acceptable when using other styling options

Based on that, I'll stick with Bootstrap. I'm getting more from it than I realized.

Thanks for the help,
Tom

allan

If you remove the Bootstrap styling files for DataTables / Editor, you'd need to then replace them with the DataTables default styling files. One way or another you need some styling for Editor!

Allan

TomBajzek

Allan,

Inspecting things further, I noticed that I have linnks to both of these css files:

DataTables/datatables.css
editor.bootstrap.min.css

I assume that this should be OK, as the first seems to be styling for Datatables, and the second seems to be for the Editor, which I think would refer to the editor panel itself. Is that correct?

There is also this file:

jquery.dataTables.min.css

Is this one redundant with the first file above, or possibly somehow conflicting? I ask because there are a couple of minor styling issues that I've not been able to clean up to my satisfaction.

Thanks,
Tom

kthorngren

The Bootstrap Stying Doc covers what is needed. If you are using datatables.css then you aren't apply the Datatables Bootstrap styling to the Datatable. You would need to use dataTables.bootstrap.css.

The Editor Bootstrap Example will show you an example of the JS and CSS files needed for full Bootstrap styling.

Duplicate CSS or JS files could cause conflicts and not behave correctly. You will need to fix both issues.

Kevin

allan

A small addition to what Kevin has said - it is possible that the datatables.css file will actually contain the Bootstrap integration for DataTables and Editor. That's the name of the file that is generated by the download builder, regardless of the styling framework used.

If you are loading that file, then don't load jquery.dataTables.min.css.

Beyond that, I'd need a link to the page to see what is going on.

Allan