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

wrobbinz opened this issue Aug 28, 2019 · 2 comments

Sort arrow misalignment in th of table #3966

wrobbinz opened this issue Aug 28, 2019 · 2 comments


Copy link

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



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


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

Demo link

Additional context

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

Copy link

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


Copy link

@tmorehouse tmorehouse commented Sep 7, 2019

BootstrapVue v2.0.0 stable has been released. See


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