Can I move the search box to the left?

amarundo

Hi,

Using the Bootstrap styling...
Can I move the search box to the left?
And once I do that, can I remove the word "Search" and the colon?
And once I do that, maybe add placeholder text inside the box?

Thanks!

glenderson

DOM feature to position the search box here -

https://datatables.net/reference/option/dom

Placeholder, search value described here -

https://datatables.net/reference/option/language.searchPlaceholder

amarundo

Thanks, very useful.

countershane

this is kind of useful, but is there a way to move the search box to the left if I'm not using bootstrap styling?
Thanks

mackmack

Yes you can make a class in your css like:
.pull-left{
float: left !important;
}

and then add this class to datatable search div using jquery or javascript.

example:
$('.dataTables_filter').addClass('pull-left');

make sure your script is in the head part of your html.

countershane

Thanks!

countershane

I found that adding:
.dataTables_filter {
text-align: left !important;
}
to the css also works.

androclus

Like countershane's last example, the simplest solution for me, too, was to just add his 3 lines to the CSS, BUT replace text-align with float:

.dataTables_filter {
   float: left !important;
}