CODEWITHSUNDEEP
angularjs
Alan2
Alan2

Reputation: 24572

How can I hide <div> elements from view but stil have them take up space with AngularJS?

I have the following:

   <div class="block-border">
       <div class="grid-select">
            <div class="clearfix">
               ...
               ...
            </div>
        </div>
   </div>

On the form area are controls which are populated with data once the screen loads. While the population is still ongoing I have a variable $scope.loading which has a non zero value. When the load finishes this value will be zero.

Is there a way that I could hide the controls on the <div class="grid-select"> so they are not visible. Note that I still want them to use up space and I still want to show the block-border DIV.

Upvotes: 2

Views: 1269

Answers (2)

oori
oori

Reputation: 5711

Angular markup:
<div class="grid-select" ng-class="{'isLoading': loading}">

CSS
.grid-select {visibility: hidden;}
.isLoading {visibility: visible;}

Upvotes: 1

Ivan Chernykh
Ivan Chernykh

Reputation: 42166

Try css' visibility: hidden; something like:

<style>
 .hidden{
   visibility:hidden;
 }
</style>

<div class="grid-select" ng-class="{'hidden': loading!=0 }">

Example: http://jsfiddle.net/cherniv/YJ2R7/

Upvotes: 6

Related Questions