Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using .sr-only inside a responsive table creates white space outside of body

See original GitHub issue

Description

Giving an element descended from .table-responsive the .sr-only class will cause the browser window to scroll horizontally due to .sr-only’s position: absolute.

I checked the docs and don’t see any limitations of using .sr-only listed. https://getbootstrap.com/docs/4.5/utilities/screen-readers/

Is there a workaround or can something be added to the docs?

Reduced test case

Reduce the browser width to its smallest and notice that the browser window scrolls, revealing white space to the right of the table. If you remove the .sr-only class from the top-right table cell, things behave normally.

https://www.codeply.com/v/0xzRkENQaH

Config

Bootstrap 4.5.2
macOS 10.15.7
Safari 14.0

Issue Analytics

State:
Created 3 years ago
Comments:7 (3 by maintainers)

Top GitHub Comments

1reaction

patrickhlaukecommented, Dec 20, 2020

coming back to this a bit late, but: would adding the position: relative in bootstrap’s core CSS cause any other unforeseen problems? if not, we could probably add it directly.

are there any other situations where the .sr-only / .visually-hidden class would cause similar problems, do we know?

0reactions

mrlifecommented, Apr 25, 2022

If this is still an issue in v5, could this please be reopened and relabeled?