0

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.

vignesh selvarathinam
  • 129
  • 2
  • 13
  • Probably you need to assign styles dynamically. check this post it may help you http://stackoverflow.com/questions/12179455/how-to-assign-alternate-class-to-rows-in-angular-js – Naghaveer R Nov 22 '16 at 09:53

3 Answers3

2

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

Patryk Łucka
  • 1,023
  • 8
  • 15
1

I can't trigger your error but I think I get it. Did you try ng-if instead of ng-show ? ng-if deletes from the DOM while ng-show only hides it

EDIT If you want to keep position of your grids, just do

<div class="col-sm-3" style="background-color:lavender;" ng-if="value">.col-sm-3</div>
<div class="col-sm-3 col-sm-offset-3" style="background-color:lavenderblush;" ng-if="!value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavenderblush;" ng-if="value">.col-sm-3</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
1

You can keep code like 

<div class="row">
<div class="col-sm-3" style="background-color:lavender;" ng-show="value">.col-sm-3</div>
<div class="col-sm-3" ng-show="!value">...</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>

Priyanka
  • 354
  • 7
  • 14