Customizing the search bar

Customizing the search bar

adityag28adityag28 Posts: 28Questions: 6Answers: 0
edited February 2022 in DataTables 1.10

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,038Questions: 1Answers: 9,953 Site admin

    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

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0

    .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?

  • kthorngrenkthorngren Posts: 19,926Questions: 26Answers: 4,698

    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

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0

    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

  • kthorngrenkthorngren Posts: 19,926Questions: 26Answers: 4,698

    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

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0
    edited February 2022

    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.

  • colincolin Posts: 15,095Questions: 1Answers: 2,581

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

    Colin

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0

    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!

  • kthorngrenkthorngren Posts: 19,926Questions: 26Answers: 4,698

    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

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0
    edited February 2022

    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?

  • kthorngrenkthorngren Posts: 19,926Questions: 26Answers: 4,698
    Answer ✓

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

    Kevin

  • adityag28adityag28 Posts: 28Questions: 6Answers: 0

    Thank you so much!
    This is working perfectly.

Sign In or Register to comment.