Custom column sort icon overlaps over text

Custom column sort icon overlaps over text

arcanisgkarcanisgk Posts: 69Questions: 16Answers: 0

Link to test case:

https://codepen.io/arcanisgk-the-sasster/pen/bNbreod

Debugger code (debug.datatables.net):
Error messages shown:
none
Description of problem:

I'm missing something in my CSS or HTML code or something is breaking my layout.

In the implementation of the datatables.net plugin when the table is fully rendered, for some reason, in the header where the sort icons are, they overlap the text, instead of staying on the right and the text on the left.

How do you control that the widest content (header or content) determines the width of the column?
In this case I think the header is trying to adjust to the content of the column... and therefore the header is compressed...

Answers

  • kthorngrenkthorngren Posts: 21,581Questions: 26Answers: 5,001
    edited December 2024

    To troubleshoot I removed all the code you have in the CSS tab and the spacing is now correct. I added sections of the code back until I found the culprit. Removing this code decompresses the header:

    .table > :not(caption) > * > * {
        padding: 0.25rem 0.25rem !important;
    }
    

    I don't have a codepen account so can't save my changes.

    Kevin

  • arcanisgkarcanisgk Posts: 69Questions: 16Answers: 0

    I imagine that was difficult, thank you very much. I tried and I didn't find that... now what I did was assign only the top and the bottom:

    .table > :not(caption) > * > * {
        padding-bottom: 0.25rem !important;
        padding-top: 0.25rem !important;
    }
    
  • arcanisgkarcanisgk Posts: 69Questions: 16Answers: 0

    I'm happy with what we've achieved...

    I just need to implement the data population using an external method...

Sign In or Register to comment.