vignesh selvarathinam vignesh selvarathinam - 14 days ago 5
CSS Question

HTML5 : ng-show/hg-hide violating the grid position?

I am facing a problem regarding HTML5 and AngularJS when using ng-show/ng-hide.
Hereby I added the sample code for better understanding.



var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

$scope.value = true;

$scope.click = function(){
$scope.value = $scope.value ? false : true;
};
});

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<button ng-click="click()" >Click</button>
</div>
</div>





In the class="row",there is 3 separate div equally divided rows. when the button click is triggered, the first row(div) will hide. But i don't know why the remaining 2 rows(divs) are changing in grid positions.

I don't know what is missing in my code. i want to display the rows in fixed grid position even if some other rows are hide or not.Correct me if i was wrong.

Thanks in advance.

Note: please Run code in snippet in full in Full Page for better view.

Answer

It happens because what ng-hide do is display: none and what you need is visibility:hidden. So solution for your problem will be to add class with visibility:hidden after click. You can define such class and use ng-class for this purpose or override .ng-hide class, but I suggest first option.

The simplest example:

HTML

    <div class="container-fluid">
      <h1>Hello World!</h1>
      <p>Resize the browser window to see the effect.</p>
      <div class="row">
        <div id="firstCol" class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
        <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
      </div>
      <button ng-click="click()" >Click</button>
    </div>

CSS

#firstCol.ng-hide{
  display: block !important;
  visibility: hidden;
}

and DEMO

https://plnkr.co/edit/rZEW2XgowDxGAqL1aBBv?p=preview

Comments