ng-show disturbing div layout - angularJS

javascript css angularjs single-page-application ng-show
FootsieNG picture FootsieNG · Apr 14, 2014 · Viewed 10.5k times · Source

I am using ng-show="!notesOpened" to hide a div if the notesOpened variable is true. However when hidden it messes up layout. Is there a way to make ng-show act in the same way as the css property visibility:hidden? so that all div elements around the div being hidden stay in the same place

Answer

Pooja Shah picture Pooja Shah · Apr 14, 2014

ng-hide uses the same property that you're referring to, i.e. display: none.

If you need to achieve this, you need to use visibility: hidden;

For that you can use the ng-class attribute.

eg: ng-class="{'vis-hidden': notesOpened==true}"

  .vis-hidden{
     visibility: hidden;
  }

Related questions

Angularjs toggle div visibility

I am trying to toggle a div text on click of a button. I tried taking a scope variable and toggeling classname based on the variable. Where am I making the mistake here <button ng-click="toggle()">test</…

Read More
CSS: Change parent on focus of child

Let's say you have something like: <div class="parent"> <input class="childInput" type="text" /> <div class="sibling"></div> </div> I want to change the appearance of the parent/siblings when …

Read More
How to color row on specific value in angular-ui-grid?

I'm trying to color a row depending on it's value in the new angular-ui-grid 3.0 rc12 but I haven't been able to. The following code used to work in the previous version (ngGrid): $scope.gridOptions = data: 'data.sites' tabIndex: -1 enableSorting: …

Read More