Having ".hidden-sm hidden-md" only hides content for medium and not for small devices #8883

egzplicit · 2013-07-31T07:51:08Z

In 3.0.0-rc1 having an element with the hidden-sm hidden-md classes will only hide it for medium devices and not for small ones as well.

The text was updated successfully, but these errors were encountered:

egzplicit · 2013-07-31T08:28:55Z

The problem seems to be in responsive-utilities.less, lines 52 and 55 where .hidden-md and .hidden-lg have the .responsive-visibility(); mixin by default. The later media queries apply only for tablets & small desktops and desktops meaning that for mobile phones anything having "hidden-md" and "hidden-sm" at the same time will actually be visible (hidden-sm will apply responsive-invisibility() but the later hidden-md will re-apply responsive-visibility() and the element will become visible).

Either (1) .hidden-lg and .hidden-md should not be declared at all on line 52 and 55 or (2) the order should be swapped so that you have .hidden-lg first, then .hidden-md and .hidden-lg.

I'd go with 1 and just remove the hidden-md and hidden-lg (lines 52 & 55) definitions from the mobile (default) version since they don't actually do anything anyway, apart from causing this bug.

mattruma · 2013-08-01T15:02:07Z

I am seeing this same issue.

pietheinstrengholt · 2013-08-04T12:24:26Z

Glad to see that I'm not the only one with this issue. Same problem here as well.

eratzlaff · 2013-08-05T08:23:44Z

Quick Fix or possible work around.
hidden-sm hidden-md = visible-lg
hidden-sm hidden-lg = visible-md
hidden-md hidden-lg = visible-sm

mbleigh · 2013-08-05T19:24:17Z

@eratzlaff that's not a workaround, that's the intent as far as I know. I don't think the hidden and visible classes were ever designed to be mixed.

eratzlaff · 2013-08-05T20:04:21Z

@mbleigh the use of two hidden-* togeter don't work as expected
try it

<div>Using hidden</div>
<div class="hidden-sm hidden-md">hidden-sm hidden-md</div>
<div class="hidden-sm hidden-lg">hidden-sm hidden-lg</div>
<div class="hidden-md hidden-lg">hidden-md hidden-lg</div>
<div>Theoretical equivalent using visible</div>
<div class="visible-lg">hidden-sm hidden-md</div>
<div class="visible-md">hidden-sm hidden-lg</div>
<div class="visible-sm">hidden-md hidden-lg</div>

mbleigh · 2013-08-05T20:30:09Z

@eratzlaff right, because they aren't meant to be used in combination. The documentation never alludes to being able to apply multiple hidden classes and since there are only three sizes, the visible classes provide the exact same functionality. I'm saying it's not a bug, it's the intent of the library to work this way.

eratzlaff · 2013-08-05T20:45:41Z

@mbleigh As long there are only three sizes. If you add a 4 size xl or xs this must be fixed.
I think this is an issues but not a big one. Its easy to use the class in another way to have the same result.

mdo · 2013-08-12T07:14:49Z

We won't be changing anything here to account for this right now—they're not to be mixed. I'd be open to exploring how to fix this though, but right now I don't see an easy way. These utilities are meant for super quick access to toggling content as-needed. If you need something more advanced, roll your own until an elegant and straightforward solution can be found. I doubt we'll have that for the final v3 though.

eratzlaff · 2013-08-13T04:42:54Z

I think I got the solution for combination of 2 and 3 class together for hidden and visible.
I am not sure if it's elegant.
For example I make something like this.

.visible-lg {
  @media (max-width: @screen-phone-max) {
    .responsive-invisibility();
  }
  &.visible-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
  &.visible-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-invisibility();
  }
  &.visible-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-visibility();
  }
}

What do you think about @mdo??
I test it with all kind of combination and its work fine for me.

eratzlaff · 2013-08-13T05:15:48Z

@mdo If you think it's ok I make the pull request.

iagdotme · 2013-08-14T17:52:41Z

We're not far off making this work. There are 8 responsive classes, we just need to add another 6 to give all possibilities. How about this?:

eratzlaff · 2013-08-14T19:45:20Z

@iagdotme If you want to cover all the possibilities you need to add another 4 more.
For example:
visible-xs+visible-sm+visible-md I know its equal hidden-lg
This is my complete code for visible and its work for ALL possible combination of visible-*
example use class="visible-xs visible-sm"

.visible-xs {
  @media (max-width: @screen-phone-max) {
  .responsive-visibility();
  }  
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-invisibility();
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-invisibility();
  }
}
.visible-sm {
  @media (max-width: @screen-phone-max) {
  .responsive-invisibility();
  }
  &.visible-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-visibility();
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-invisibility();
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-invisibility();
  }
}
.visible-md {
  @media (max-width: @screen-phone-max) {  
  .responsive-invisibility();
  }
  &.visible-xs {
    @media (max-width: @screen-phone-max) {  
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
  &.visible-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-visibility();
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-invisibility();
  }
}
.visible-lg {
  @media (max-width: @screen-phone-max) {
  .responsive-invisibility();
  }
  &.visible-xs {
    @media (max-width: @screen-phone-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
  &.visible-sm {
    @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-invisibility();
  }
  &.visible-md {
    @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
      .responsive-visibility();
    }    
  }
  @media (min-width: @screen-large-desktop) {
    .responsive-visibility();
  }
}

for hidden its the same idea.
let me know if its work for you.

iagdotme · 2013-08-15T10:05:21Z

@eratzlaff I haven't been able to test your code but it seems right.

The reason I listed only 14 classes as that gives you all the possibilities without duplication. There are pros and cons with both approaches. Yours gives you all possibilities of hidden and visible and makes more sense semantically. It does result in more code though. My example cuts down on the amount of code needed.

Personally I prefer your solution, but it's whether simplifying and reducing the amount of code is more important. I do feel implementing a full list of responsive utility classes for BS3 is very important, but I guess it depends where on the scale this lies.

dstroot · 2013-08-15T14:53:00Z

KISS (keep it simpe)
Original proposal by lagdotme is a very good solution
We need some way to hide on smaller devices and show on bigger screens. If I can't double up, eg "hidden-xs" and "hidden-sm" then "hidden-xs-sm" is the way to go.

turchenkoalex · 2013-08-15T17:18:02Z

@eratzlaff that's my version of fix for subj with a little bit smaller code. May be useful for you

It's work like in your solution.. We can mix few or more classes of each subgroup (visible or hidden).

Example:

<div class="visible-xs visible-md">Visible on medium and extra small only</div>
<div class="hidden-xs hidden-md">Visible on small and large only</div>

Fix:

.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
  .responsive-invisibility();
}
.visible-xs {
  @media (max-width: @screen-tablet) {
    .responsive-visibility();
  }
}
.visible-sm {
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-visibility();
  }
}
.visible-md {
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-visibility();
  }
}
.visible-lg {
  @media (min-width: @screen-large-desktop) {
    .responsive-visibility();
  }
}

.hidden-xs,
.hidden-sm,
.hidden-md,
.hidden-lg {
  .responsive-visibility();
}
.hidden-xs {
  @media (max-width: @screen-tablet) {
    .responsive-invisibility();
  }
}
.hidden-sm {
  @media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) {
    .responsive-invisibility();
  }
}
.hidden-md {
  @media (min-width: @screen-desktop) and (max-width: @screen-desktop-max) {
    .responsive-invisibility();
  }
}
.hidden-lg {
  @media (min-width: @screen-large-desktop) {
    .responsive-invisibility();
  }
}

cloud1250x4 · 2013-08-15T18:09:55Z

@turchenkoalex can you compile a css file please :/ it would be greatly appreciated thank you ;)

eratzlaff · 2013-08-15T18:23:34Z

@turchenkoalex Great 👍 its work fine. I prefer you code. It much much more easier to understand.
Clean code like @dstroot request.

@iagdotme All combination = 14 👍
the rest are in different order only.

turchenkoalex · 2013-08-15T18:29:04Z

@cloud1250000 Yep! It's already compiled and you can get it from https://github.com/TurchenkoAlex/bootstrap/tree/3.0.0-wip/dist/css

iagdotme · 2013-08-15T18:40:43Z

This is looking good!

@eratzlaff I was working in binary (my brain is funny like that!) -
0001,0010, 0011, 0100 etc...

frewsxcv · 2013-08-16T08:01:33Z

@mdo Why weren't the classes meant to be combined? What if I want something to show up only on mobile devices?

mdo · 2013-08-16T21:58:37Z

Punting for a 3.1 release, and tracking as part of #9397.

evandam · 2014-12-23T16:54:36Z

Old post, but I recently had this problem and have a quick solution that avoids having to dig into any CSS. Instead of putting multiple .hidden-* classes in one element, make nested elements and assign each one its own class. This probably isn't best practice, but it gets the job done!

<div class="hidden-xs">
    <div class="hidden-sm">
        <span> I'm only visible for medium and large </span>
    </div>
</div>

<div class="hidden-md">
    <div class="hidden-lg">
        <span> I'm only visible for small and extra-small </span>
    </div>
</div>

As far as I can tell, this only behaves as expected with hidden-, not visible-

eratzlaff mentioned this issue Aug 7, 2013

4th set of column classes #9135

Closed

mdo closed this as completed Aug 12, 2013

mdo mentioned this issue Aug 14, 2013

Responsive utilities #9469

Closed

mdo reopened this Aug 14, 2013

This was referenced Aug 14, 2013

.hidden-xs applied to li in ul.list-inline wraps in desktop viewport #9555

Closed

hidden and visible #9564

Closed

cvrebert mentioned this issue Aug 15, 2013

Responsive utilities do not accodomdate all desired use cases when applying .hidden-* and .visible-*. #9611

Closed

turchenkoalex mentioned this issue Aug 16, 2013

Issue #8883: make responsive visibility classes mixable with each other #9692

Closed

mdo mentioned this issue Aug 16, 2013

Feature planning #9397

Closed

22 tasks

mdo closed this as completed Aug 16, 2013

gjb2048 mentioned this issue Nov 3, 2014

class hidden-sm not working bmbrands/theme_bootstrap#349

Closed

twbs locked and limited conversation to collaborators Jan 4, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Having ".hidden-sm hidden-md" only hides content for medium and not for small devices #8883

Having ".hidden-sm hidden-md" only hides content for medium and not for small devices #8883

egzplicit commented Jul 31, 2013

egzplicit commented Jul 31, 2013

mattruma commented Aug 1, 2013

pietheinstrengholt commented Aug 4, 2013

eratzlaff commented Aug 5, 2013

mbleigh commented Aug 5, 2013

eratzlaff commented Aug 5, 2013

mbleigh commented Aug 5, 2013

eratzlaff commented Aug 5, 2013

mdo commented Aug 12, 2013

eratzlaff commented Aug 13, 2013

eratzlaff commented Aug 13, 2013

iagdotme commented Aug 14, 2013

eratzlaff commented Aug 14, 2013

iagdotme commented Aug 15, 2013

dstroot commented Aug 15, 2013

turchenkoalex commented Aug 15, 2013

cloud1250x4 commented Aug 15, 2013

eratzlaff commented Aug 15, 2013

turchenkoalex commented Aug 15, 2013

iagdotme commented Aug 15, 2013

frewsxcv commented Aug 16, 2013

mdo commented Aug 16, 2013

evandam commented Dec 23, 2014

Having ".hidden-sm hidden-md" only hides content for medium and not for small devices #8883

Having ".hidden-sm hidden-md" only hides content for medium and not for small devices #8883

Comments

egzplicit commented Jul 31, 2013

egzplicit commented Jul 31, 2013

mattruma commented Aug 1, 2013

pietheinstrengholt commented Aug 4, 2013

eratzlaff commented Aug 5, 2013

mbleigh commented Aug 5, 2013

eratzlaff commented Aug 5, 2013

mbleigh commented Aug 5, 2013

eratzlaff commented Aug 5, 2013

mdo commented Aug 12, 2013

eratzlaff commented Aug 13, 2013

eratzlaff commented Aug 13, 2013

iagdotme commented Aug 14, 2013

eratzlaff commented Aug 14, 2013

iagdotme commented Aug 15, 2013

dstroot commented Aug 15, 2013

turchenkoalex commented Aug 15, 2013

cloud1250x4 commented Aug 15, 2013

eratzlaff commented Aug 15, 2013

turchenkoalex commented Aug 15, 2013

iagdotme commented Aug 15, 2013

frewsxcv commented Aug 16, 2013

mdo commented Aug 16, 2013

evandam commented Dec 23, 2014