Use of searchBuilder and searchPanes on layout (Bootstrap 4)

slolo

Link to test case: See below
Debugger code (debug.datatables.net): NA
Error messages shown: NA
Description of problem: Hello,

I would like to know it is normal to have the behavior on the test case when I try to add searchBuilder in the middle of the layout.

See test case: https://live.datatables.net/xaniqefa/1/edit)

As you can see, the "Export" button is in the middle whereas the searchBuilder button is on the left.
Is it a bug or normal behavior?

On the second test case, you can see that searchPanes is outside the screen:

See test case: https://live.datatables.net/yatoteto/1

Is there a way to fix this?

The problem persists even if you remove the "card" component from Bootstrap.

Thank you in advance for your help, and have a good day.

allan

It's due to this style:

div.dtsb-searchBuilder {
  width: 100%;
}

Typically I've assumed that SearchBuilder will take up 100% width. If that isn't what you want, add:

div.dtsb-searchBuilder {
  width: auto;
}

https://live.datatables.net/xaniqefa/2/edit

I've not been able to recreate the issue from the second link. I've tried both Firefox and Chrome, but they both layout as expected:

Regards,
Allan

slolo

div.dtsb-searchBuilder {
  width: auto;
}

Thakns, that does the trick

Regarding the second test case, it is very strange that you are unable to reproduce the issue.
I encounter it in every configuration I test on Windows 10 and 11 (26H2), using the latest versions of Chrome and Firefox, and across various computers.

Do you have any further information that might help in reproducing this issue?
I noticed it and reported it a very, very long time ago.
See: https://datatables.net/forums/discussion/80921/datatables-with-searchbuilder-and-searchpanes-layout-overflow-on-the-right-bs4