[ANGULAR]

[pawel.szwak]

Hello, I have a problem displaying gantt in my project. I'm trying to transfer an example bryntum-gantt-trial\gantt-2.0.1-trial\examples\angular\advanced from the directory to my project. I'm just loading the header, I'm not loading the task. I don't know what the reason is.

If I delete a style entry @import "bryntum-gantt/gantt.stockholm.css"; then I see list of tasks, but bo styles.

What could be the reason?

[saki]

It can be that your Gantt container has zero height. It's a matter of CSS, see please how it is resolved in our example.

[pawel.szwak]

I used styles from your design. Which styles should I modify?

[pawel.szwak]

I removed all styles from my app. The issue still exists

[mats]

You have to apply a size to the component, just use basic CSS and it will work fine.

[pawel.szwak]

I've set the height styles for the component, but nothing changes.

this is my html template

<div id="container"></div>

styles

#container {
    display:flex;
    flex-direction: column;
    height:100%;
}

[mats]

Please use CODE tags for code

[mats]

And please upload a full test case so we can inspect your code and try to find the CSS mistake

[pawel.szwak]

In the project, it only imports styles from the component

 @import "bryntum-gantt/gantt.stockholm.css";  

My element has only inlines style

 <div style="height: 1000px;width: auto;" id="container"></div>  

The above style does not change anything

I've set the element height in the console and the task list has appeared

 <div class="b-grid-body-container b-widget-scroller" data-owner-cmp="b-gantt-8" style="overflow-y: auto;height:1000px;">  

How to solve this problem globally?

[mats]

Need to review what you're copying before copy-paste coding Look in our sources to see the styles that are relevant for the example to look good:

/* You can add global styles to this file, and also import other style files */

@import "bryntum-gantt/gantt.stockholm.css";

html, body {
    height: 100%;
}
  
body {
    font-size      : 14px;
    font-family    : Lato, sans-serif;
    margin         : 0;
    display        : flex;
    flex-direction : column;
}
  
// ------------------ from app ------------------

app-root {
    display:flex;
    flex-direction:column;
    align-items: stretch;
    height: 100%;
}
gantt-panel {
    flex: 1;
}
#container {
    display:flex;
    flex-direction: column;
    height:100%;
}

#container > .b-panel {
    flex : 1;

    .b-gantt {
        width : 100%;
    }
}