Angular: ng-show Change Leaves Container Element with Width and Height of 0
Problem: I’m trying to show an image when a certain variable is equal to true, but the size of the image created is dependent on the size of the container element. When my function is called that sets the visible variable to true and the image is created, the container variable comes back with a width=0 and height=0 which skews the appearance of my image.
The solution I found was to ditch ng-show altogether and instead use ng-class to apply a CSS class that “hides” the element. This way, the element is technically instantiated (has a width an height), but is also hidden for the user.
Now when isVisible = false, the img will be hidden with the CSS ‘hide’ class.