Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/bootstrap-vue/bootstrap-vue/issues/6326 below:

Sortable columns in responsive b-table causes horizontal overflow due to sr-only tags · Issue #6326 · bootstrap-vue/bootstrap-vue · GitHub

When you have a responsive b-table with sortable columns, sr-only text is added to show that columns can be clicked to sort or remove sorting. However, these columns can cause empty horizontal overflow.

1. Create a responsive table where the final column is sortable; make sure the screen is narrow enough that there is a horizontal scroll bar on the table.
2. Scroll the page (not the table) horizontally; notice that the page width has increased and scrolls.
3. Inspect the DOM and delete the sr-only span in the final column.
4. The overflow on the page goes away.

The page should not expand because of the presence of the sr-only span

Libraries:

• BootstrapVue: 2.21.2
• Bootstrap: 4.5.3
• Vue: 2.6.12

Environment:

• Device: Mac, iPhone
• OS: macOs Catalina 10.15.7, iOS 14.3
• Browser: Chrome, Safari, Mobile Safari
• Version: Chrome 87, Safari 14, Mobile Safari 14.

https://codepen.io/a_sqaure/pen/zYKeBOL
Make sure page is narrow enough for table to overflow, then scroll horizontally outside the table

Showing the sr-only span in the DOM:

Overflow is removed if the sr-only span is deleted:

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4