Customizing the search bar

adityag28

Hi, I want to position the search bar in the middle and the size should be big.
I tried the solutions available but they didn't work.
Thank you.

allan

Perhaps you could show me what you'd tried? A little CSS should do the trick - for example to increase the size just use font-size.

I don't really want to just give you the solution for this as it is basic CSS, but we do offer support services if you need us to implement this for you.

Allan

adityag28

.dataTables_filter input { height: 50px; width:200px; border: 2px solid;}

.dataTables_filter input:hover { height: 50px; width:200px; border-color:rgb(30, 30, 158); }

I am able to customize the search bar only this much. Not able to change the position to the middle.
Also, is there a way I can create my own search bar and add the same functionality to it?

kthorngren

Possibly this will do what you want:
http://live.datatables.net/facuxovo/1/edit

It moves the div that the search input is in:

.dataTables_wrapper .dataTables_filter {
    float: none;
    text-align: center;
}

Maybe you can use the dom option to place the elements where you want.

is there a way I can create my own search bar and add the same functionality to it?

Yes, you can use the dom option to remove the default search input ,ie , f. Don't use. searching false to remove the input becuase it will disable searching too.

You can then create your own and use search(). See this column filter example for an idea of how to use the inputs. This custom toolbar example shows how to use dom to place your custom elements with the Datatables elements.

Kevin

adityag28

I found that there are a parent div with class="row" and then there are 2 div with class="col-sm-12 col-md-6" containing the filter and length div.

Because of the parent div, they are divided into 2 halves.
Please refer the image

kthorngren

You can use the dom option to layout the Datatables elements. See the Styling examples for Bootstrap. If you still need help then please provide a test case showing the issues you are trying to fix.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

adityag28

http://live.datatables.net/pofeqahu/1/edit?html,css,js,console,output

This is the link for the live DataTable. Make it full screen to see that the search bar is on the right.
Please help me to the position search bar in the middle and the number of entries box on the right.

colin

You haven't tried any of that CSS that Kevin suggested in your test case, that would be the place to start,

Colin

adityag28

http://live.datatables.net/pofeqahu/2/edit

Here it is, I tried that but it was not working, so I didn't include it in the link.
Can you guys please help me solve this.
Also, please refer my comment which contains the image about the parent div.
Thanks!

kthorngren

Also, please refer my comment which contains the image about the parent div.

Thats due to using Bootstrap. Have you looked at the dom docs as I suggested? Specifically the Styling example for BS5.

Here is your updated example with the search in the center, length change on the right. Note the change from the default dom to this for 3 Bootstrap columns:

<'col-sm-12 col-md-4'><'col-sm-12 col-md-4'f><'col-sm-12 col-md-4'l>

Kevin

adityag28

Hi, thank you very much for the help.

But this doesn't seem to work.
http://live.datatables.net/pofeqahu/3/edit

Can you please share the live working link?

kthorngren

Sorry forgot the link:
http://live.datatables.net/xadafali/1/edit

Kevin

adityag28

Thank you so much!
This is working perfectly.