jQuery UI Widgets Forums Grid Column Header Alignment on Sortable Columns

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 8 years, 11 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • durech
    Participant

    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


    durech
    Participant

    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>


    Dimitar
    Participant

    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/


    durech
    Participant

    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


    Dimitar
    Participant

    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/

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.