Answers

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  February 2022

  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 Posts: 28Questions: 6Answers: 0

  February 2022

  .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 Posts: 21,336Questions: 26Answers: 4,951

  February 2022

  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 Posts: 28Questions: 6Answers: 0

  February 2022

  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 Posts: 21,336Questions: 26Answers: 4,951

  February 2022

  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 Posts: 28Questions: 6Answers: 0

  February 2022 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.
• colin Posts: 15,240Questions: 1Answers: 2,599

  February 2022

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

  Colin
• adityag28 Posts: 28Questions: 6Answers: 0

  February 2022

  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 Posts: 21,336Questions: 26Answers: 4,951

  February 2022

  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 Posts: 28Questions: 6Answers: 0

  February 2022 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?
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  February 2022 Answer ✓

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

  Kevin
• adityag28 Posts: 28Questions: 6Answers: 0

  February 2022

  Thank you so much!
  This is working perfectly.