Column Header Alignment on Sortable Columns

[durechParticipant]

If I use the columns.align property on a grid where the columns are not sortable, the alignment works as you would expect. However, using the same align: ‘center’ causes the text to be not centered over the column, but overflows out of the column header to the right. A ‘right’ alignment hides the text altogether.

Looking at the generated HTML, among the many <div>’s being generated for the column header, there is this one that contains the text to be displayed (where “ID” is the text value in the header)

<div style="padding-bottom: 2px; overflow: hidden; text-overflow: ellipsis; <strong>text-align: right;</strong> margin-left: 4px; margin-right: 2px; margin-bottom: 4px; margin-top: 4px;">
  <span style="text-overflow: ellipsis; cursor: default;">ID</span>
</div>

In the debugger, if I remove the text-align: right; from the <div> and add it instead to the <span> it then looks correct.

Is there someway I can make this happen programmatically

[durechParticipant]

Note: the generated HTML DOES NOT contain the tags. It looks like this:

<div style="padding-bottom: 2px; overflow: hidden; text-overflow: ellipsis; text-align: right; margin-left: 4px; margin-right: 2px; margin-bottom: 4px; margin-top: 4px;">
  <span style="text-overflow: ellipsis; cursor: default;">ID</span>
</div>

[DimitarParticipant]

Hello durech,

The alignment of the column header text does not take into account the width of column menu button. You can change the header rendering however you like with the column renderer callback function (similar to cellsrenderer).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[durechParticipant]

Is there an example you can point me to. Am I just going to have to replace the entire <div><span></span></div> sequence and just add the “text-align:center” to the <span>. If that is the case, it sure would be a nice enhancement if you would automatically handle this for me when I specify the ‘align’ property, so I don’t have to worry about whether I have made the column sortable or not. To me, if ‘align’ is supposed to perform alignment of the text in the column header, it should work independent of other factors like sortability.

Thanks

Dennis

[DimitarParticipant]

Hello Dennis,

I understand your concern, but this is how the align property currently works. We will consider improving it in a future version of jQWidgets. As for the renderer callback – you can return whatever HTML you require in it, e.g.: https://www.jseditor.io/?key=column-header-alignment-on-sortable-columns (note the column “Product”).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts