0

I tried utilizing bootstrap's hidden-sm to hide some class but it seems working only for portrait mode.

<div class="col-md-2 hidden-sm" >
     <div class="topFilterCtrl filterBarCommon" title="Filter By" 
     ng-click="searchReservationVm.closeAllFilterDiv()">
     <span id="filterByLabel">Filter By</span>
     </div>
    </div>

I want it to work for landscape mode too. How do I fix it?

Smitha
  • 5,956
  • 19
  • 87
  • 150

2 Answers2

1

Try using visible instead of hidden.

enter image description here

askl56
  • 352
  • 1
  • 4
0

It all depends on how many pixels wide your tablet is on Landscape mode. You should be able to google it and figure it out...

Extra small devices- xs(<768px)
Small devices - sm (≥768px)
Medium devices - md (≥992px)
Large devices - lg (≥1200px)

You could to use a combination of .hidden-xs and .hidden-sm to hide on anything less than 992px which usually means tablets.

Check out the documentation on Responsive Utilities Classes 

<div class="col-md-2 hidden-xs hidden-sm" >
  <div class="topFilterCtrl filterBarCommon" title="Filter By" ng-click="searchReservationVm.closeAllFilterDiv()">
    <span id="filterByLabel">Filter By</span>
  </div>
</div>

Or you could use a combination of .visible-md-block and .visible-lg-block as well.

Schmalzy
  • 15,902
  • 7
  • 42
  • 45
  • My tablet has a 1024*768 resolution in landscape mode. And if I use -md- then, it will not be visible on desktop as well! – Smitha Aug 17 '15 at 05:39
  • Only on desktops 1024px wide or less, which is pretty rare these days. This is the nature of Bootstrap, or responsive design in general actually, as it responds to the width of the device, not the device itself. – Shawn Taylor Aug 18 '15 at 03:12
  • of course, you could sniff the device operating system http://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery and add hidden-md with javascript ONLY if it finds one of these OS's – Shawn Taylor Aug 18 '15 at 03:17
  • You could use the [customize](http://getbootstrap.com/customize/) feature on bootstrap docs to create a custom version of Boostrap and change the the `md` viewport to be less than or equal to 1024px instead of 992px. That would also solve the problem – Schmalzy Aug 18 '15 at 19:51