Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

<b-table> sorting arrows overlap <th> text #3696

Closed
shaneparsons opened this issue Jul 15, 2019 · 4 comments · Fixed by #3968

Comments

@shaneparsons
Copy link

commented Jul 15, 2019

Describe the bug

The sorting arrows of b-table overlap the th text under certain circumstances.

Steps to reproduce the bug

  1. Go to this codepen
  2. Shrink the width of your browser window... at a certain point you will see the overlap

Expected behavior

The arrow to always remain to the right of the th text.

Versions

Libraries:

  • BootstrapVue: 2.0.0-rc.26

Environment:

  • Browser: all modern browsers.

Additional context

If you un-comment the css in the codepen file you'll see my "temporary" fix for the issue... I'm sure somebody else can come up with a cleaner solution though.

@shaneparsons shaneparsons changed the title `b-table` sorting arrows overlap `th` text <b-table> sorting arrows overlap <th> text Jul 15, 2019

@shaneparsons

This comment has been minimized.

Copy link
Author

commented Jul 15, 2019

It may also be useful to note that this only seems to happen when the width of the <th> is wider than that of the <td>

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 15, 2019

Adding position relative to the table headers will make it so that dropdowns and tooltips in table headers don't position correctly (which is why we moved to float: right instead of absolute positioning of the sort arrows.

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Jul 15, 2019

Maybe when sorting, we might need to add additional padding to the table data cells.

tmorehouse added a commit that referenced this issue Aug 29, 2019
@tmorehouse

This comment has been minimized.

Copy link
Member

commented Sep 7, 2019

BootstrapVue v2.0.0 stable has been released. See https://bootstrap-vue.js.org/docs/misc/changelog

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.