I tried to display a LineChart inside an accordion but it does not show anything.
Another component with a map from angular2-google-maps, does the same : not shown.
I will try do do my own angular 2 simple accordion because I do not have time to understand what is not working. Outside of the accordion, I have no problem displaying theses 2 components
The only solution I found is to not use anything. I have buttons hidding/showing part of my custom accordion now. I display all expanded, as it my angular components are visible. Then I use a collapse/expand All buttons to simulate an accordion.
This solution is kinda crap but it works at the moment
Components not displayed if included on a hidden area
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
This is a known issue for any widget in any library that needs to be visible to do dimension calculation, chart and maps are one of those, so with your accordion result will be the same. I've blogged about this 5 years ago at PrimeFaces;
http://blog.primefaces.org/?p=1485
For example, try putting the chart in a tab that is visible by default, not hidden. I'm thinking of a workaround now.
http://blog.primefaces.org/?p=1485
For example, try putting the chart in a tab that is visible by default, not hidden. I'm thinking of a workaround now.
-
- Prime
- Posts: 18616
- Joined: 05 Jan 2009, 00:21
- Location: Cybertron
- Contact:
Ok, here is the solution, do not create the chart on page load if chart is in an inactive tab but create it after the tab is activated, since content is visible, charts or maps will be able to do proper dimension calculation. Here is an example;
PrimeNG accordion has the handy onOpen callback that you can use to initialize the chart when needed, not on load.
Code: Select all
<p-accordion (onOpen)="onTabOpen($event)">
<p-accordionTab header="Tab I" [selected]="true">
Test
</p-accordionTab>
<p-accordionTab header="Tab II">
<p-pieChart [value]="data1" width="300" height="300" *ngIf="displayChart"></p-pieChart>
</p-accordionTab>
</p-accordion>
Code: Select all
export class AccordionDemo {
data1: any[];
displayChart: boolean = false;
constructor() {
this.data1 = [
{
value: 300,
color: '#F7464A',
highlight: '#FF5A5E',
label: 'Red'
},
{
value: 50,
color: '#46BFBD',
highlight: '#5AD3D1',
label: 'Green'
},
{
value: 100,
color: '#FDB45C',
highlight: '#FFC870',
label: 'Yellow'
}];
}
onTabOpen(event) {
if(event.index === 1) {
this.displayChart = true;
}
}
}
-
- Information
-
Who is online
Users browsing this forum: No registered users and 7 guests