Align headers on the right and sorting

[yannniskargakis]

Hello,

I am using the method setLabel (jqGrid JavaScript) to align the header of a column to the right i.e:
$("#myGrid").jqGrid('setLabel', 'name', '', {'text-align':'right'});
I have also set this column to be sortable (sortable:true)

The problem is that sorting arrows are still on the right side of the column header and as result are going out of the grid and are not appear to the grid.

Any solution?

Thanks

[tonytomov]

Thanks,
Will look into this.

[tonytomov]

Hello,

To be a honest currently I haven't find any resolution of the problem. Try with different margins and paddings, but without success.

Maybe in this case the icons can be placed at left of the text, which means another option. We will see if this can be done without big problems.

Kind Regards,
Tony

[yannniskargakis]

Hello,
Thanks for your time.
I have already tried to add padding using the setLabel method on the header of the column without success too.
I think that putting the icons on the left is the most efficient solution.
Please inform me for a fix

[tonytomov]

Hello,

I have added a method setSortIcon 50f3452 , which changes the position of the sort icon.

Please let me know if it is working as expected.

Kind Regards,
Tony

[yannniskargakis]

Hello,
There are two issues in this function.
First of all the two arrows are not aligned in the same position, the up arrow is more left than the down arrow.
Also the function is not working when the text of the header is wrapped, arrows are going out of the grid. As i can understand you computed the value of margin based on the length of the text. Could you compute this value based on the width of the column?
Thanks

[tonytomov]

Thank you for recommendation. I do not have tested it with wrapped text. Will do the needed.

As per misalignment of the arrow - which CSS system is used - jQuery UI or Bootstrap?
I have tested both and haven't discover any problem with this. Maybe in specific environment this is happen. I can make you a demo demonstrating this.

It will be very good if you can prepare a simple test case for the misalignment. Do you have performed any changes in the CSS?
As far as I can remember in some jQuery UI themes this can be seen

[yannniskargakis]

I am using jQuery UI.
I have performed a number of changes in the css in order to adapted in my needs,
but the problem of misalignment is appeared also in a clean css.
Here is one of your own examples (jqgridjs\edit_add_delete\dialogs) that i have modified, following screenshots showing the problem with the misalignment

[tonytomov]

Hello,

I have simplified the code. : d19d1b9

The problem is the the element where the icons reside - they are inside the text,
Anyway, please test and let me know if it is fine.

Kind Regards
Tony

[tonytomov]

Hello,

Please reopen if this is not fixed for you