Ok using Firebug I found that the search field is wrapped inside a tag and I then realised that my own stylesheet floats that element to the left so it was applying that to DataTables too.
My solution was to add an inline style. I opened up jquery.dataTables.js, found this line:
The search box should be inside a div that has its own selector. There's no need to go into JS to fix it.
If you have your default styles for "label {}" then to style the search box, something like this should work:
[code]
.dataTables_filter label { label styles here }
.dataTables_filter input { input styles here }
[/code]
However, there are as many ways to skin this cat as there are ways to organize CSS. In other words, your fix will simply depend on personal style and approach to CSS. Let's stay with the assumption that you want to have all labels float: left by default. If you want to fix this for certain labels (like the search label) you just have to "undo" it for that label:
That said: personally, I would not style all labels with a left float. If I had a particular kind of label that I needed this for (for example, inside my forms) I would target those instead:
Replies
My solution was to add an inline style. I opened up jquery.dataTables.js, found this line:
nFilter.innerHTML = ''+sSearchStr+'';
and replaced it with this:
nFilter.innerHTML = ''+sSearchStr+'';
Regards,
Steven
I just added this code into my table.css
[code]
label {
display: block;
float: left;
width: 100%;
}
[/code]
And it seems to work well now, I just dont want to touch the js code but something is wrong with the new .
If you have your default styles for "label {}" then to style the search box, something like this should work:
[code]
.dataTables_filter label { label styles here }
.dataTables_filter input { input styles here }
[/code]
However, there are as many ways to skin this cat as there are ways to organize CSS. In other words, your fix will simply depend on personal style and approach to CSS. Let's stay with the assumption that you want to have all labels float: left by default. If you want to fix this for certain labels (like the search label) you just have to "undo" it for that label:
[code]
.dataTables_filter label { float: none }
[/code]
-----
That said: personally, I would not style all labels with a left float. If I had a particular kind of label that I needed this for (for example, inside my forms) I would target those instead:
[code]
form label { float: left }
[/code]
Greg