search

cotag / orbicular

A CSS based circular progress bar for AngularJS
MIT License
47 stars 15 forks source link

Width calculation fails when combined with ngShow/ngHide #22

Open iangreenleaf opened 9 years ago

iangreenleaf commented 9 years ago

I ran into this situation and got quite the headache trying to fix it. I'm not sure what the best solution would be, but thought I'd bring it to your attention so you can consider.

The problem arises when:

  1. An orbicular element is under the effect of ng-hide or ng-show (or anything else which sets CSS of display:none).
  2. The orbicular element is created after the element has been hidden, not on load. For example, this can happen to a collection that is populated in the same digest cycle as the truth condition to show the collection.

This example shows the behavior. In this situation, the offsetWidth value is 0 because the element is not displayed, so Orbicular calculates the wrong font size and ends up hiding the element (even after display is changed and the element should be visible).

stakach commented 9 years ago

There is a programmatic event you can fire to trigger the resize manually: parentElementScope.$broadcast('orb width');

It would be good to detect show and hide automatically however. Can you think of any way of achieving this? Maybe though the angular-animate services - we could feature detect its inclusion?

iangreenleaf commented 9 years ago

Yeah, that's sort of the problem - I'm not sure how to know when Angular has shown or hidden an element, in order to broadcast that event at the right time. I looked a bit and couldn't find anything, but the animate services is a good idea, maybe there's something there.