Preventing sort arrows from overlapping header text

  • Resolved rocketpig3

    (@rocketpig3)


    3 years, 9 months ago

    Hi,

    Is there a good way with CSS or otherwise to prevent the sort arrows from overlapping the table header row text?

    View post on imgur.com

    I have tried using a negative margin but couldn’t get it to fit properly.

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 9 months ago

    Hi,

    thanks for your post, and sorry for the trouble.

    Normally, this is achieved by TablePress’ default CSS, which sets padding for this. Did you maybe override the padding?

    TablePress uses

    .tablepress .sorting,
.tablepress .sorting_asc,
.tablepress .sorting_desc {
  padding-right: 20px;
}

    Regards,
    Tobias

    Thread Starter rocketpig3

    (@rocketpig3)

    3 years, 9 months ago

    Thanks for the help.

    I was able to fix this by adding the CSS code you mentioned with !important. However this made the table a bit wider and added a horizontal scroll bar.

    I was able to fix this by reducing the font size with:

    .tablepress-id-33 tbody td {
 font-size: 12px;
}
.tablepress-id-33 thead th {
	font-size: 14px;
}

    So I’m happy with how it looks now.

    Thanks!

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    3 years, 9 months ago

    Hi,

    no problem, you are very welcome! 🙂 Good to hear that this helped!

    Yes, the table will get wider when doing this, as the space has to come from somewhere. Reducing the font size is a good option then.

    Best wishes,
    Tobias
     
    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Preventing sort arrows from overlapping header text’ is closed to new replies.