Search code examples
javascriptangularjsd3.jsionic-frameworkangular-nvd3

Conflict of IonicModal with AngularNVD3 (based on D3)

I'm using nvd3 in my Ionic App. There is a scenario in which I face an issue i.e. I've a PieChart on one tab and IonicModal on another tab. Once I open the IonicModal, and after that when I come on the PieChart Tab, the chart becomes so small. Looks so strange to me, because if the IonicModal is on the same tab, and the pieChart is visible, so Modal will not affect the pieChart, but if pieChart is hidden and I open the Modal, so the chart again becomes so small (Design is disturbed)...

Here is in an image enter image description here

Here is compact versionenter image description here

Here is the compact one. Any Help would be appreciated.

Solution

  • Hi Guys I solved this issue by changing width="100%" to width="100vw" in angular nvd3 directive.

    like this line:

    scope.svg.attr('width', '100%').style({width: '100%'});

    changed to:

    scope.svg.attr('width', '100%').style({width: '100vw'});

    I used the following SO link which helps you to know the difference between 100% and 100vw:

    Difference between Width:100% and width:100vw?