responsive .hidden-* classes change from display block to inline-block

[jholl]

related to issues #8500 , #7808 , #4929 ; using .hidden-sm to hide span within .nav > li > a . Because class is display: block above -sm then text wraps to new line. Would you consider .hidden-* classes to be display: inline-block instead ?

Here's a jsfiddle of the two cases - but the repercussions could be greater outside of this situation so probably needs more consideration... http://jsfiddle.net/jholl/P86yf/

[cvrebert]

Related: #8963

[mdo]

We won't be changing the utilities to inline-block—I think that's the less common use case. These things are tricky because we won't be adding support for every element possible—that's just not maintainable or practical.

[maxymczech]

@mdo You don't have to add support for all possible tags (like you did with tables). What you can do is add .hidden-inline-* and .visible-inline-* family of classes for toggling inline/inline-block content. Right now v3 does not allow you to effectively hide/show inline/inline-block content for different devices, and adding those new classes would solve it. And it doesn't contradict the idea of Bootstrap, I think.

[cvrebert]

Reopening to consider @dantistus' feature request.

[geekcubed]

Commenting from my merged duplicate #9322 regarding the conflict of display: block !important; with inline-lists:

@mdo I full appreciate that it is impractical to support and maintain inline-block variations for every tag, however:

• Lists are very common tags - I'd probably go as far to say they are more common in RWD that tables
• Several classes within bootstrap - list-inline, nav et. al. explicitly style lists to be inline-block. Even if there isn't justification to apply this to all lists, then there should be a case for applying it to those classes Bootstrap applies the inline-block to:

.img-respsonsive.visible-* { display: inline-block !important; }
.list-inline > li.visible-* { display: inline-block !important; }
.badge.visible-* { display: inline-block !important; } 

etc.

[cvrebert]

@geekcubed We're currently considering @dantistus' request, which seems much more workable. Did you read his proposal?

[geekcubed]

@cvrebert I did see the proposal yes - but felt it was worth chipping something different into the mix. As I see it, there are four options on the table:

1. Do nothing Leave everything as it is. Easiest to implement (do nothing), but perhaps leave a bit of a "smell" in the project
2. Fix everything Apply the "inline-block !important" fix for every element that renders as inline-block. Realistically, not workable
3. Fix classes Identify the classes that apply "display: inline-block", (such as .badge or .list-inline) and address just these. Some work, but means the framework works as the developer on the street would expect ( this really where I am from - it doesn't work as I'd naturally expect ). A quick ctrl+f brings up 18 instances of inline-block in the css, so not that bad (+perhaps some inheritance)
4. New classes Add new visible-inline-* and hidden-inline-* Quickest solution to the problem at hand, but requires another layer of classes / logic / something to learn. Perhaps makes the framework less approachable. With the changes between 2.3 and 3.x, now would be the sensible time to do this option.

Just my 0.2$ really.

[mdo]

For v3, we won't be adding anything to address this. If you have specific thoughts on an inline or inline-block solution, let's address those in a separate issue or, preferably a PR, for potential inclusion in v3.1.

[mdo]

Closing out and tracking in #9397 as part of 3.1. Just no time to add this now.

[lucasvst]

Man if I want to hide an element from SM and XS screens, I cannot. If I declare class="hidden-sm hidden-xs" it simple show in one and hide in another.

[cvrebert]

@lucasvst: #9821

[lucasvst]

Thank u man!

[johankri]

Why is display: block needed anyway?

.hidden-xs {
  display: block !important;
}

[umhan35]

Hope this issue would have been solved. It's common to show only icon on mobile devise while showing descriptive text on tablet and above.

[miksh7]

+1
Sounds as it is closed but I have to vote for adding set of hidden-inline-* classes (e.g. similar to http://geekswithblogs.net/MightyZot/archive/2013/11/12/responsive-inline-elements-with-twitter-bootstrap.aspx)

Very often you need to hide/show an inline element based on media queries.

[cvrebert]

@miksh7 If you had read through the issue, you'd know that the outcome was that we're going to add such classes.

[Shipow]

+1
supporting inline-block could be useful in many case.

[potsky]

+1

[kuntae]

+1

[cvrebert]

No further endorsements are necessary.

This is planned to be fixed in v3.2 via #12204 or similar.