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
Closed

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

shaneparsons opened this issue Jul 15, 2019 · 4 comments

Comments

@shaneparsons
Copy link

@shaneparsons shaneparsons 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
Copy link
Author

@shaneparsons shaneparsons 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>

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse 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.

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Jul 15, 2019

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

Loading

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Sep 7, 2019

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

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants