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

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

anupamsmauryaanupamsmaurya Posts: 8Questions: 0Answers: 0
edited July 2011 in General
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

Replies

  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    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
  • anupamsmauryaanupamsmaurya Posts: 8Questions: 0Answers: 0
    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.
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    edited July 2011
    to keep the Filter from wrapping its textbox to the next line, try
    [code]
    div.centered{
    float:left;
    white-space:nowrap;
    }
    [/code]
  • anupamsmauryaanupamsmaurya Posts: 8Questions: 0Answers: 0
    It worked :)
    Also I reduced the width of '.dataTables_length' to center align the filter box
    Thanks
This discussion has been closed.