Why is my search box wrapped

vandenabael

Hi All,

In attachment you can find a screenshot of my website where I used the datatables to present my data.
In addition, The functionality works perfect, including the search and entry functions.

However, both the "search" and "show entries" seem to be "wrapped" as you can see on the screenshot and I can't identify the reason why. Even after disabling all unrelated style formats, the wrapping still takes place. I must be missing something but can't put my finger on it.

Any thoughts or input are welcome!

kthorngren

That is a styling issue specific to your page. We will need to see it to help debug. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

vandenabael

Hi Kevin,

That makes sense, here is a lightweight Fiddle that reproduces the problem:

https://jsfiddle.net/vandenabaele/nv6j5kr1/12/

I feel like it must have something to do with the bootstrap version. When I use an older version, my entire layout falls apart but it seem to prevent it from "wrapping".

Thanks for your quick reply by the way.

kthorngren

You need to load dataTables.bootstrap5.min.cs. Click the CSS tab of this example. The Styling docs provide more details. Use the Download Builder to get the appropriate files for the style framework you want to use.

Updated example:
https://jsfiddle.net/9x5obdch/

Kevin

vandenabael

I'm an idiot an you sir, are a hero! Thanks a lot!

puffster

I finally updated my datatables from 1.12 to the latest version -- I'm a little behind I know . I had the same problem as above when changing from the legacy dom configuration to the new layout style (which I LOVE btw!!). I followed your suggestion and added bootstrap.css into my html page and it fixed the issue for me as well -- search is no longer wrapping.

I bundled and downloaded the latest version and added them into my project. When creating the bundle, it said to not include Bootstrap5 as a part of the bundle if I already had it downloaded, which I do, so I did not select Bootstrap5 as a part of the bundle. So I'm curious as to why I needed to include a reference to Bootstrap 5 css? Am I just not understanding the bundling directions? Should I have included it as a part of my bundle?

kthorngren

@puffster If you selected Bootstrap 5 in the Step 1. Choose a styling framework step then dataTables.bootstrap5.min.cssis included. You can open the generated files to see a listing of what is included. Also you can uncheck the Concatenate option on the Download page to see what is included.

So I'm curious as to why I needed to include a reference to Bootstrap 5 css?

Can you provide a test case showing this so we can take a look?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Make sure you have removed the old datatables JS and CSS files so there aren't any conflicts.

Kevin

puffster

To clarify, I did not choose any styling framework because I already have bootstrap 5 loaded for my project.

I'll try to put a test case together, but I'm developing an old asp.net web app that involves bundling so I don't know how difficult it will be to emulate that...

kthorngren

@puffster

I did not choose any styling framework because I already have bootstrap 5

That is why you needed to add it separately. Now that you added it separately you have both dataTables.bootstrap5.min.css and dataTables.dataTables.min.css included which could have conflicts.

In Step 1 choose the styling framework, ie Bootstrap 5, you are using so Datatables builds the proper set of style integration files. Otherwise you will get the default stying which likely won't work properly.

In Step 2 don't select Bootstrap 5 if you have already included Bootstrap 5 from their site.

Kevin