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

    Div inside how to call class in css?

    How do I add extra slides to this pure CSS text rotator?

    how to append an icon to an input search?

    how to align image and text when floating to image

    HTML/CSS How to make menu slide up when menu item is clicked?

    How to combine two images into one so I can vertically align across all browsers?

    How can I tell a scrollbar to always start at the bottom with CSS?

    How to style HTML select option hover and selected option effects

    How can i spin an image -360 degrees and +360 degrees using the -webkit and jQuery?

    How to control the size of a table cell in css

    how to build a mobile site - basics, is it all CSS?

    How to edit a pseudo element on focus using css or jQuery

    How can I extend the width of a child div to go beyond the parent div's width?

    How to make space between menu items in CSS/HTML

    How can my website store strings locally? [closed]

    How to get equal height for all sections?

    How to make header background 100% height?

    image shows ui-button over the button image

    How to have a table scroll only within a custom control on page? CSS help needed

    How to implement a partially flexible screen layout with a grid framework?

    How do I get responsive images to stay equivalent heights as they scale?

    How to make the HTML colors of a Bootstrap design edge-to-edge

    How to inherit height in div?

    nth-child's child is not shown

    How can I add more images to my HTML5/CSS3 Slideshow

    How do I learn what changes my css values?

    Lazy loading images how

    How do nested vertical margin collapses work?

    How to obtain non-uniformly scrolling elements and layered “curtain-like” backgrounds on a webpage?

    Using javascript to show html on every page except one page