How to make a hidden (ng-cloaked) item preserve the space it takes up when its visible

Question

In a table... I have action buttons that appear when the mouse goes over that row by using ng-cloak and ng-show.

The problem is, when the icon appears, it takes up more space than when its not there, and the html around it jumps.

I even set my css to use display:none for ng-click, which I thought is supposed to preserve the space the hidden element takes up (as opposed to visibility: hidden).

How can I fix this? OR can you think of a better way to do this?

     <tr id="treeHistoryItem" ng-repeat="o in tree.history" 
             ng-mouseover="showEdit=true" ng-mouseleave="showEdit=false">

          ....

         <td align='right'>
            <a ng:cloak ng-show="showEdit" href 
              ng-click="removeTreeRec(o.$$hashKey)" 
               class='fa fa-times _red _size6' ></a>
        </td>
    </tr>

Here's a plunkr example: http://plnkr.co/edit/POA9b2pZA9QbBgcMsxBE?p=preview

Answer 1

ngCloak is used to

prevent the Angular html template from being briefly displayed by the browser in its raw (uncompiled) form while your application is loading

The correct place to put it would be way further up in the DOM tree but it's really meant to solve a different problem than this. I would try just going with ngShow here and rather override its CSS class, .ng-hide to do visibility: hidden; rather than display: none;

(Visibility is the one that preserves space, not display).

As noted in the docs for ngShow you will need to use !important to override the display: none; property.

Note, in the version of Angular you were using in your plunker, ngShow is adding an inline style to the hidden element. I am not sure which version moved away from that but I could not get this approach to work with 1.0.5.

Here's it working with your plunker, but with the most recent Angular version: Plunk

Answer 2

Late to the party, however...

In my case, whenever I need to do this i use ng-class. If you copy the code from your ng-show and put it into: HTML:

ng-class="{'disabled': showEdit}"
ng-click="showEdit && removeTreeRec(o.$$hashKey)"

CSS:

.disabled {
 visibility: hidden;
 cursor: default;
}

Cursor:default simply makes the cursor not change for usability purposes. Hope this helps!

EDIT: in this case adding the cursor and showEdit to the ng-click probably wont make a difference as the icon will always be shown if the mouse is over the icon due to the hover event, but nonetheless I think it's good practice to cover all bases

Answer 3

You can do that using css. You can put to your <tr> a height.

Answer 4

you can assign height to your containers which sometimes isn't practical because you don't always know the content height up front. or you could change your classes content declaring them to be

   .not_remove.ng-cloak,.not_remove.ng-hide{
          display:block;
          visibility:hidden;

   }

note the .not_remove class. this will enforce this new behavior only on elements who have the no_remove class. the display property can be setted to what ever flow your element follows