How to avoid width calculation, can this be done with just CSS?
See working version: http://bkuhl.github.io/angular-form-ui/#!/slide-toggle
What's happening here is that there's a width calculation when Angular processes the directive. BUT, the item isn't visible, so it has no width. The labels shown on this slider are customizable, so while it defaults to On/Off, it could be anything. Meaning the slider width needs to be completely variable.
Is it possible to change the CSS for this slider so as to avoid the width calculations?
Not sure it will be possible in every cases but replacing the ng-show by an ng-if in your plunker will do the trick (no additional css/js).
It's working with the ng-if because the directive will not be called until the condition is evaluated to true. From here the parent dom element is visible and width computation succeed. On the other hand, in the case of the ng-show, the directive is called directly and since its parent dom element is hidden (display:none;) the width computation will "fail".
FYI ng-if is available for version 1.1.5 and higher of Angular.