Bootstrap: New overflow-hidden utility class?

[sts-ryan-holton]

Hi, I'm suggesting another simple feature here for Bootstrap. Often I find in some projects I'm needing to set overflow to hidden to maintain consistent sizing or as part of jQuery functionality, I often find either having to set overflow on either the horizontal axis or vertical axis.

I was thinking we could possibly create some helper classes like this - overflow-*

Such as:

.overflow-y {
     overflow-y: hidden
}

Any possibility of getting some base functionality in place for this? We could possibly make use of SCSS variables to choose either hidden or auto for example.

[kevinruscoe]

To me .overflow-y implies there IS overflow. The other show/hide visible/invisible classes describe their function quite clearly.

So, I think, to maintain consistency, it should be .overflow-y-hide and .overflow-x-hide.

[sts-ryan-holton]

@kevdotbadger Understandable, I was just expressing one particular method. I agree with your comment, could we possibly allow for changing the hide to auto as well? You could have a few classes such as the following:

.overflow-y-hide
.overflow-y-auto
.overflow-y-scroll
.overflow-y-visible

.overflow-x-hide
.overflow-x-auto
.overflow-x-scroll
.overflow-x-visible

And possibly some that do both x & y

.overflow-hide
.overflow-auto
.overflow-scroll
.overflow-visible

[MartijnCuppens]

IMO there is no need for all these classes. A helper class for overflow: hidden maybe is something I might use, but I don't see me using classes like .overflow-x-visible.

[kevinruscoe]

Thoughts on responsive versions for these helpers? I can't really think of a use case where you'd need to responsively screw with overflow, so it may be overkill.