How do I set the size of the Search box?

Dagoth

I apologize if this has been answered already but I can't seem to find anything related to setting the size of the search box, the default one is too small and i want the width to be bigger.

rf1234

https://datatables.net/forums/discussion/comment/169090/#Comment_169090

Dagoth

That script you wrote doesn't work for me unfortunately.

rf1234

I am not going to write your code, sorry. Unless you are using Bootstrap 3 you will need to make modifications. You can use your browser's inspector and figure out what changes need to be made. If that doesn't work, post a test case as per the forum rules.

kthorngren

See if this answer helps:
https://datatables.net/forums/discussion/comment/168011/#Comment_168011

If not then minimally let us know the environment you have, ie, using standard Datatables styling, Bootstrap or other styling framework. Better yet build a simple example of what you have so we can provide a better answer.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Dagoth

I'm using the Bootstrap 4 styling for the datatable, I basically want it so that the search filter is on the left and length changer is on the right, I also want the search filter to be max width possible.

colin

You can use dom to move the elements around. If that doesn't resolve the issue, please post a test case as Kevin requested.

Colin

Dagoth

nvm, I got it, basically to put search filter on left and length selector on right, you've gotta add the dom options like this (if using bootstrap 4):

"dom": "<'row'<'col-lg-10 col-md-10 col-xs-12'f><'col-lg-2 col-md-2 col-xs-12'l>>" +
           "<'row'<'col-sm-12'tr>>" +
           "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

then place this in CSS:

        .dataTables_wrapper .dataTables_filter{
            float: left;
        }
        .dataTables_wrapper .dataTables_length{
            float: right;
        }

to set width of filter use this:

    div.dataTables_wrapper div.dataTables_filter input {
          width: 100%; <!-- or whatever width you want -->
    }

Hope this helps someone!