Components not displayed if included on a hidden area

UI Components for Angular
Post Reply
zamrokk
Posts: 6
Joined: 17 Mar 2016, 19:51

17 Mar 2016, 20:00

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

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

17 Mar 2016, 23:13

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.

cagatay.civici
Prime
Posts: 18616
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

17 Mar 2016, 23:17

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;

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;
        } 
    }
}
PrimeNG accordion has the handy onOpen callback that you can use to initialize the chart when needed, not on load.

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 7 guests