Ionic - CSS does not apply when updating in a different view

Question

I am currently working on my first Ionic App and is working with Angular for the first time.

I am using a pie chart library to display charts in the application toolbar. This works well if I update when I'm on the toolbar, and looks like this:

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

But if I go to another tab, say, the server tab and update there, the width and height will not be applied to the charts in the control panel. Instead, they are displayed using standard widths and heights (500 x 900 W instead of 100 x 100 W). (See second image on imgur). If I update again on the toolbar, they will be displayed as usual.

I looked at the source code of the library and saw that when updating in the control panel, the [0] .parentElement.offsetWidth element is 100, but if I update in a different view, it is 0, so the default values ​​are used. It seems that the pie-chart directive cannot access the parent when it is in a different view.

Here is the HTML and CSS:

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 the answer for hours, but I'm not even sure what exactly I need to look for. The only solution I came across was to change the default value in pie-chart.js, which I would rather not do.

EDIT

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

Answer 1

After hours of research, I finally found the cause of the problem.

There are two separate behaviors that cause the problem:

• Ionic caches up to 10 views to improve performance. This means that when you switch from one tab to another, the first one remains in the DOM so that it can be loaded faster. However, it does not seem that CSS styles apply to a view that does not display. This means that the actual height and width of the div with class .pieChart is 0 at this point. I think this is similar to setting the display: none property of an element. ( Blog post explaining jquery issue )

• Whenever a pie chart is updated, it will set its size to the width and height of the parent element. I assume that this is done so that the graph resizes after resizing the window and updating the data.

These 2 things obviously don't mix well. Since Ionic caches the panel view, the <pie-chart></pie-chart> element is still in the DOM, so it will try to re-display it immediately. But since styles do not apply to the parent div, it will just get the width and height of 0 and revert to using the default values.

On regular websites, views are usually not cached. This means that when updating the <pie-chart></pie-chart> element is missing in the DOM, so it will not try to display at all. Only after you return to viewing and load the element again, it will try to display and read the dimensions of its parent. (Which will work as all styles apply).

I have not found a way that you can tell the element to "stay rendering" even if it is not an active view. This means that there are two options for solving this problem (in addition to changing the way the pie chart library works):

• Rigidly set the height and width as the default inside pie-chart.js
• Disable caching for this view in ion mode or clear the viewing cache each time you update. You can do this by calling $ionicHistory.clearCache()

Answer 2

Customize the style I guess with

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