Is there any class to hide some content on mobile screen?


#1

Is there any class to hide some div/col on mobile screen (I want some content only on tablet)? like bootstrap (xs-hidden)


#2

Scrolling through ionic.css, I can’t see anything like this.A class for one breakpoint to display/hide your content won’t be really hard to implement tho, but that’s an interesting request to make to the ionic team


#3

I use ng-hide=“myValue”, ng-show=“myValue” or ng-if=“myValue” (from angular) in the div.

myValue is a boolean expression.


#4

You’ll probably want a custom directive for this. I just wrote up when that has the same functionality as the side menu expose-aside-when, but you can put it on any element.

Example:

<div show-when="large">test</div>

That will only show on tablets.

The directive:

.directive('showWhen', ['$window', function($window) {


 return {
    restrict: 'A',
    link: function($scope, $element, $attr) {

  function checkExpose() {
    var mq = $attr.showWhen == 'large' ? '(min-width:768px)' : $attr.showWhen;
    if($window.matchMedia(mq).matches){
		$element.removeClass('ng-hide');
	} else {
		$element.addClass('ng-hide');		
	}
  }

  function onResize() {
    debouncedCheck();
  }

  var debouncedCheck = ionic.debounce(function() {
    $scope.$apply(function(){
      checkExpose();
    });
  }, 300, false);

  checkExpose();

  ionic.on('resize', onResize, $window);

  $scope.$on('$destroy', function(){
    ionic.off('resize', onResize, $window);
  });

}
  };
}]);

To see it in action, look at this codepen:

NOTE: Seeing if the Ionic team is interested in adding this directive into Ionic. see: https://github.com/driftyco/ionic/issues/2541


#5

Thanks for your answers.


#6

To set a .hidden-xs bootstrap-like class avalaible, you’ll write something like this in your css

@media screen and (max-width: 767px) {
    .hidden-xs {
        display:none;
    }
}

#7

Thank you, help me a lot!

That’s said, imho you should only called handler when there is any media querie change, not on window resize, even if it is debounced. At least this is more what i’d expect in such case.

I rewrite your directive but keep in mind, i’m completly new to ionic and btw angular.

.directive('showWhen', ['$window', function($window) {

    return {
        restrict: 'A',
        link: function($scope, $element, $attr) {

            // Setup a match media query listener that triggers a ui change only when a change
            // in media matching status occurs
            var mq = $attr.showWhen == 'large' ? '(min-width:768px)' : $attr.showWhen;
            var mql = $window.matchMedia(mq);
            mql.addListener(checkExpose);

            function checkExpose() {
                $element.toggleClass('ng-hide', !$window.matchMedia(mq).matches);
            }
            //
            $scope.$evalAsync(checkExpose);
         }
    };
}])

Like this is the first time I write any angular directive, i could be missing something.