CODEWITHSUNDEEP
jqueryangularjsangularjs-directive
Alexandru R
Alexandru R

Reputation: 8833

Directive included within Ng-show behave very wrong, otherwise it works

I've put a Fiddle here to showcase my error.

It's a multislider, based on colResizable plugin. The issue I have is that I need to display it with an ng-show, which renders it incorrectly if not displayed initially.

$scope.show = false; //initially set to false in controller


<div class="row" ng-show="show">
    <multirangeslider values="ranges" variances="variances" class="multislider-container row"></multirangeslider>
...

Please see the fiddle (initially not working). When you change show value to true it works and it doesn't make sense. Why? How do I fix this?

Upvotes: 1

Views: 112

Answers (1)

Langdon
Langdon

Reputation: 20073

jQuery cannot calculate the width (or height) of a hidden element. The colResizable plug-in uses jQuery's outerWidth function and gets zero back from it. There are a number of ways to get around the issue -- the easiest is to use the visible style (you could write an ngVisible directive): http://jsfiddle.net/5u6Ls/5/

Alternatively, you can do something crazy like try and monitor when your element is visible and then apply the colResizable plugin, or there are also a number of workarounds on SO:

Upvotes: 1

Related Questions