Skip to content

Sort arrow misalignment in th of table #3966

Closed
@wrobbinz

Description

@wrobbinz

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)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions