Ionic - CSS is not applied when refreshing on another view

Question

I'm currently working on my first Ionic App and working with Angular for the first time.

I am using the pie-chart library to display charts on the dashboard of the app. This works nicely if I refresh while I am on the dashboard and looks like this:

https://imgur.com/YUCAO6i,oakGp8c#1

But if I navigate to another tab, lets say the server tab, and refresh there, the width and height is not applied to the charts on the dashboard. Instead they are rendered using the standard width and height (500h x 900w instead of 100h x 100w). (See second picture on imgur). If I refresh on the dashboard again, they will render normally.

I went through the source code of the library and saw that when refreshing on the dashboard, the element[0].parentElement.offsetWidth equals 100, but if I refresh when on another view, it is 0, so the default values are used. It looks like the pie-chart directive can't access the parent when on another view.

Here is the HTML and CSS used:

HTML

<div class="pieChart">
    <pie-chart data="server.chartData.cpu" options="chartOptions"></pie-chart>
</div>

CSS

.pieChart {
    height: 100px;
    width: 100px;
    float: left;
}

I tried to find an answer for hours, but I am not even sure what exactly I need to search for. The only solution I came up with is to change the default value in the pie-chart.js, which I would prefer not to do.

EDIT

The app is open source, you can find the full code in my repository: https://github.com/AndreasGassmann/cloudatcostapp

Answer 1

After hours of researching I finally found the cause of the problem.

There are 2 separate behaviours causing the issue:

• Ionic caches up to 10 views to increase performance. This means that when you switch from one tab to another, the first one remains in the DOM so it can be loaded quicker. However, it seems that the CSS styles are not applied to the view that is not visible. This means that the actual height and width of the div with the .pieChart class is 0 at this point. I think it's similar to setting the display: none property of an element. (A blogpost explaining the issue with jquery)

• Whenever the pie-chart updates, it will set its size to the width and height of the parent element. I guess this is made so the chart will resize after you resize your window and refresh the data.

Those 2 things obviously don't go well together. Since Ionic caches the dashboard view, the <pie-chart></pie-chart> element is still in the DOM, so it will try to re-render immediately. But because the styles are not applied to the the parent div, it will just get width and height 0 and fall back to using the default values.

In normal websites the views usually don't get cached. This means that when you refresh, the <pie-chart></pie-chart> element isn't present in the DOM, so it won't try to render at all. Only after you navigate back to the view and the element is loaded again will it try to render and read the dimensions of its parent. (Which will work, since all styles are applied).

I haven't found a way how you can tell an element to "stay rendered", even if it's not the active view. This means that there are 2 options to solve this (besides changing the way the pie-chart library works):

• Hardcode the height and width as the default value inside the pie-chart.js
• Disable caching for that view in ionic or clear the view cache every time you refresh. You can do this by calling $ionicHistory.clearCache()