ng-show disturbing div layout – angularJS

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

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}"

     visibility: hidden;

I have got this working

ng-style=”{visibility: notesOpened && ‘visible’ || ‘hidden’}”

You should try ng-class instead so you can give the div a class which only do display:none

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .
Read More:   Difference between async/await and ES6 yield with generators

Similar Posts