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

Sort arrow misalignment in th of table #3966

Closed
wrobbinz opened this issue Aug 28, 2019 · 2 comments · Fixed by #3968

Comments

@wrobbinz
Copy link

commented Aug 28, 2019

Describe the bug

In a sortable table, on a narrow window size, when a column (col A) contains a cell with a long string of text, <th>s to the right of col A lose their sort-arrow alignment.

Steps to reproduce the bug

  1. Go to this CodeSandbox
  2. Narrow your the view until you notice the sort-arrows jump out of alignment.
    Screen Shot 2019-08-28 at 12 16 25 PM

Expected behavior

The sort-arrow icons should remain aligned with the text of the <th>.

Versions

Libraries:

  • BootstrapVue: 2.0.0-rc.28
  • Bootstrap: 4.3.1
  • Vue: 2.5.22

Environment:

  • Device: Macbook Pro
  • OS: macOS Mojave
  • Browser: Chrome
  • Version: 75

Demo link

https://codesandbox.io/s/vue-template-mxipj

Additional context

I did find this open issue #3696, which is similar but appears to be different. (overlap vs misalignment)

@tmorehouse

This comment has been minimized.

Copy link
Member

commented Aug 28, 2019

Actually issue #3696 is related, caused by the same issues.

v2.0.0 stable will have new SVG based sort icons used as background images, which will fix this issue.

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.