Responsive plug-in inline control alignment on right aligned first column

Responsive plug-in inline control alignment on right aligned first column

chrisjshieldschrisjshields Posts: 8Questions: 2Answers: 0

With the datatables.net responsive plug-in, it is often the case that the responsive inline control will wrap with the first cell content, or appear out of alignment when the first/target column is numeric text-nowrap is added to the cell:


Is this the expected behaviour? Is there a recommended way of aligning the inline control to the left of the column when the content is right aligned (e.g. numeric)?

Thanks for any help.

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 65,588Questions: 1Answers: 10,904 Site admin
    Answer ✓

    Because the column is numeric, it automatically has the class dt-type-numeric assigned to it - that causes the right alignment.

    You could use columns.className with dt-left to have it left aligned instead for that column.

    Another option is to have the responsive control in its own column.

    Allan

  • chrisjshieldschrisjshields Posts: 8Questions: 2Answers: 0

    Thank you for the response.

    Both options work, but I wondered if the default behaviour could be improved upon. For now I have gone with the responsive control in its own column.

    Thank you for this excellent piece of software!

  • allanallan Posts: 65,588Questions: 1Answers: 10,904 Site admin
    Answer ✓

    The problem with changing the default behaviour for this is it is conditional on a number of things:

    1. The first column is numeric
    2. Responsive is being used in its default configuration

    If Responsive isn't being used, then the numeric column should right align, like all numeric columns (that can be overridden).

    So I could put a trap in for it, but it would make the default conditional, and I'm not sure about doing that!

    Allan

  • chrisjshieldschrisjshields Posts: 8Questions: 2Answers: 0

    Is there something the author of the responsive plug-in could do to force the control icon to the edge? (E.g. left in the standard config)

  • allanallan Posts: 65,588Questions: 1Answers: 10,904 Site admin
    Answer ✓

    I am the author of the Responsive plugin. I guess it might be possible to have the icon be position: absolute and make the cell position: relative. But I'd be worried about the layout for case where the text is left aligned.

    I'll have a look into options for that :)

    Allan

  • chrisjshieldschrisjshields Posts: 8Questions: 2Answers: 0

    Nice one, let me know if you do end up making any changes :)

Sign In or Register to comment.