Help with placement of Search, and using "clear"

bradirby

I am trying to add some additional elements to the header of my datatables grid and all is working except the Search box is bumped down one row. How can I center the radio buttons, and get the search box to show up on the same row as the rest? Does it have something to do with the <"Clear">?

Here's a fiddle: http://jsfiddle.net/7KkpQ/3/

Jowin

Add this in your css code for the radio buttons:

.EacEcrRadioRegion {
float: left;
}

bradirby

Thanks for this - it fixed the fiddle but not my real page. In fact, the float left made it worse by making the radio buttons land on the bottom line of the header box as well. I can't post a link to the real page because it's on a private network. They are running IIS, but I can't imagine why that would make a difference. It's a problem IE and Chrome and FF. Any other ideas?

without the float left, it looks like this (dotted lines are the box around the header):

-----------------------------------------------------
{length combo} {radio buttons}
{search box}
-----------------------------------------------------


With the float left, it looks like this:
-----------------------------------------------------
{length combo} {radio buttons}
-----------------------------------------------------
{search box}

bradirby

I took some screen shots of the original page:

http://imgur.com/1N6ABtP

tangerine

I think these are the relevant definitions from demo_table_jui.css:

.dataTables_length { // Show (menu) entries
width: 40%;
float: left;
}

.dataTables_filter { // Search
width: 50%;
float: right;
text-align: right;
}

Works for me.