How to force sorting icons to be next to column text
How to force sorting icons to be next to column text
So far I've been unable to make this work on my own and have not found a solution in the forums or API, so here's the question:
Q: How can I force the sorting icons to appear right next to the column text, rather than to the far right or far left of the column (the default using CSS/floating)?
In other words, I'd like the sorting icons to act like they are just another character of the column text with a single space between them and the column text like so (where "_" = space and "v" = the sorting icon): "ColumnText_v" rather than the current "ColumnText____v" as it is now. Fixing the column width is not the solution I am after either.
I'm unable to get it to work via the CSS (at least so far), and I am wondering if there is a known way to easily make this happen? I believe this would also solve the problem I am seeing where the icon overlays the column text when the column data is smaller than the column text.
I tried fiddling with the sSortJUI settings, but I am not seeing them take effect. I tried putting them in the dataTables initialization area like the following (to remove the css_right class), but it did not work. Perhaps I am doing this wrong?
[code]
"sSortJUIAsc": 'ui-icon ui-icon-triangle-1-n',
"sSortJUIDesc": 'ui-icon ui-icon-triangle-1-s',
"sSortJUI": 'ui-icon ui-icon-carat-2-n-s',
[/code]
Thanks in advance!
Q: How can I force the sorting icons to appear right next to the column text, rather than to the far right or far left of the column (the default using CSS/floating)?
In other words, I'd like the sorting icons to act like they are just another character of the column text with a single space between them and the column text like so (where "_" = space and "v" = the sorting icon): "ColumnText_v" rather than the current "ColumnText____v" as it is now. Fixing the column width is not the solution I am after either.
I'm unable to get it to work via the CSS (at least so far), and I am wondering if there is a known way to easily make this happen? I believe this would also solve the problem I am seeing where the icon overlays the column text when the column data is smaller than the column text.
I tried fiddling with the sSortJUI settings, but I am not seeing them take effect. I tried putting them in the dataTables initialization area like the following (to remove the css_right class), but it did not work. Perhaps I am doing this wrong?
[code]
"sSortJUIAsc": 'ui-icon ui-icon-triangle-1-n',
"sSortJUIDesc": 'ui-icon ui-icon-triangle-1-s',
"sSortJUI": 'ui-icon ui-icon-carat-2-n-s',
[/code]
Thanks in advance!
This discussion has been closed.
Replies
http://datatables.net/forums/comments.php?DiscussionID=2199&page=1
I'll work on this some more and if I come up with a good solution I will post it here.
What I'm ideally looking for is behavior similar to adding a PDF icon or the like to a link via the
HI Does anyone have an answer to this question: put the sorting arrow right beside the column title? Thanks for any hint answer.