Filter box in center in line with length menu and paginate button

anupamsmaurya

Hi,
can you help me in bringing the filter box in center so that the length menu, filter box and pagination links(UI) are in a same line. I tried many combinations of sDom without any luck.

A screen shot of my table is in the following post

http://www.datatables.net/forums/discussion/comment/23139#Comment_23139

fbas

see the sDom on http://www.datatables.net/ref

you can specify div wrappers and classnames for those divs in your sDom string

"sDom": '<"floatright"p>>rt'


should create structure similar to this:
[code]

{length menu}
{filter}
{pagination}


and you can make your div classes ".centered" and ".floatright" to justify, and float inline

anupamsmaurya

hello fbas,

I am using "bJQueryUI": true. I tried the following

[code]
"sDom": '<"H"l<"centered"f><"floatright"p>r>t<"F"ip>',
[/code]

[code]
div.centered{
float:left;
}
div.floatright{
float:right;
}
[/code]

With this, the filter box has moved between the length menu and pagination buttons (not exactly in the center though), but the problem is the text 'search' is appearing in line with length menu and pagination and the text box is appearing below this text.

fbas

to keep the Filter from wrapping its textbox to the next line, try
[code]
div.centered{
float:left;
white-space:nowrap;
}
[/code]

anupamsmaurya

It worked :)
Also I reduced the width of '.dataTables_length' to center align the filter box
Thanks