How to avoid width calculation, can this be done with just CSS?


Tags: css,angularjs,directive

Problem :

See http://plnkr.co/edit/xqYBnz5BHLP844kXJXKs?p=preview

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?



Solution :

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).

see here : http://plnkr.co/edit/dghyemUuBMfbIPgLJHPz?p=preview

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.


    CSS Howto..

    How to style pseudo counter in CSS

    How to scale SVG properly and responsively in HTML5?

    How to add new line in a Bootstrap button using CSS

    Css: how to combine table and column specification into a single selector?

    How to increase spacing between lines in CSS?

    How to edit css files using php safely?

    How does CORS (Access-Control-Allow-Origin header) increase security?

    How do I vertically align the text to the middle using CSS?

    Block grid shows horizontal scroll bar in Foundation

    How to deploy a jekyll site locally with css, js and background images included?

    How to apply remaining width to a div in the middle of 2 other divs

    how to make the file input field wrap?

    How do I link to top of a section on the page minus the height of a fixed nav-bar?

    How to overlay “transformed” element?

    how to give css height a percentage of a different div (above original div)

    How to change accordion css to plain white?

    How is this put in the center using CSS?

    How to make LESS combine CSS rules with a comma

    Overlay image to show like panorama [closed]

    How to get floated divs align to the top?

    How to defferent row heights for different rows in a single table?

    How to make sidebar horizontal for xs devices

    How can I dynamically change element's width related with parent width using only CSS? [closed]

    How to make a transition in height without knowing the height before?

    How to add a Google icon font to pseudo :before

    Images not showing up in correct spot [closed]

    How to animate my element in my case?

    With media queries, how to prevent the browser from downloading a smaller background-image if a larger image has already been downloaded?

    How to send HTML to an embedded WebView without running a local webserver?

    How to make a div-Element be visible/hidden by Mouseover