Question

7

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

rated 0 times [ 12] [ 5] / answers: 1 / hits: 17996 / 10 Years ago, tue, june 24, 2014, 12:00:00

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.

example

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

havenbilliec

Add To Favorites

Follow

Total Points: 324

Total Questions: 106

Total Answers: 94

Location: Pitcairn Islands

Member since Fri, Oct 15, 2021

3 Years ago

havenbilliec questions

1 Uncaught ReferenceError: process is not defined / Line 0: Parsing error

Thu, Mar 3, 22, 00:00, 2 Years ago

1 React Big Calendar - Is it possible to click on a day and retrieve a list of events on that day?

Fri, Feb 11, 22, 00:00, 2 Years ago

1 Warning: A component is changing a controlled input to be uncontrolled in React js

Fri, May 7, 21, 00:00, 3 Years ago

1 Error: Cannot find module nuxt.js, why my app don't start?

Wed, Apr 7, 21, 00:00, 3 Years ago

1 Redirecting to another html page after successful login attempt

Wed, Nov 25, 20, 00:00, 4 Years ago

View All

answered 10 Years ago dawnc · Accepted Answer

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