Increase search box size in DT 2.x with Bootstrap

Clientless

Hello,
I'm doing a migration from 1.10 to latest version.

Everything is fine, except one thing I can't find a solution.
With version 1.x was easily possibile to increase searchbox input size, but with version 2 it's not.

I'm using Bootstrap as UI framework, and the searchbox is in the topStart zone and should be about 25/30% of table width.
Playing around with browser DevTools, it's only possible in doing so by modifing the whole search wrapper by adding "flex-fill".

Is there a solution like the old version (without using JS)?

Thanks.

allan

div.dt-container div.dt-search input {
  width: 400px;
}

or similar should do it?

Allan

Clientless

It works, but only with a fixed width.

If I set it to 30% or 40%, input box become even smaller. With 100% label moves on top and size does not increase much.

I tinkered a little this weekend and maybe I found a working solution:

div.dt-container div div.dt-layout-start {
    flex: 1 1 auto;
}
div.dt-container div.dt-layout-start div.dt-search {
    flex: 1 1 auto !important;
    text-align: -webkit-auto;
}
div.dt-container div.dt-layout-start div.dt-search input {
    width: 40%;
}

This set searchbox to 40% of free space between layout start and layout end.
So if you have a couple of buttons in the upper-end, it still works.

I still need some tests, but for now it seams to work.

allan

Ah I see. Yes, the flexbox adds a little bit of complication if you are using relative widths. Great to hear you found a solution - thanks for sharing it!

Allan