Rendering issue for the calendar / progress part. about gantt-elastic

[neuronetio]

Hi,
could you provide some screenshots?
In the meantime, try to set width of the container (gantt parent) to 100% and height to some value (might be 100% too) .
Thanks

[renaudham]

thanks.

I applied size to both container and gantt component, to see. With colors back so we can visualize.

<div v-if="dataview === 'gantt'" style="width:100%; height: 600px; background: red"> <gantt-elastic :tasks="gantttasks" :options="ganttoptions" style="width:100%; height: 300px;background: blue"></gantt-elastic> </div>

Here is the result

the config and data are as following:
ganttoptions: { title: { label: '', html: false, style: { 'font-size': '20px', 'vertical-align': 'middle', 'font-weight': '400', 'line-height': '35px', 'padding-left': '22px', 'letter-spacing': '1px' } }, taskList: { columns: [ { id: 1, label: 'ID', value: 'id', width: 40 }, { id: 2, label: 'Description', value: 'label', width: 200, expander: true }, { id: 3, label: 'Assigned to', value: 'user', width: 130, html: true }, { id: 3, label: 'Start', value: (task) => task.startDate.format('YYYY-MM-DD'), width: 78 }, { id: 4, label: 'Type', value: 'type', width: 68 }, { id: 5, label: '%', value: 'progress', width: 35, styles: { label: { 'text-align': 'center', 'width': '100%' }, value: { 'text-align': 'center', 'width': '100%' } } } ] }, locale: { code: 'en', 'Now': 'Now', 'X-Scale': 'Zoom-X', 'Y-Scale': 'Zoom-Y', 'Task list width': 'Task list', 'Before/After': 'Expand', 'Display task list': 'Task list' },

gantttasks: [ { id: 1, name: 'Make some noise', label: 'Make some noise', user: '<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>', start: this.getDate(-24 * 5), duration: 5 * 24 * 60 * 60, progress: 85, type: 'milestone' }, { id: 2, name: 'Make some noise', label: 'With great power comes great responsibility', user: '<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>', start: this.getDate(-24 * 4), duration: 4 * 24 * 60 * 60, progress: 50, type: 'milestone', style: { base: { fill: '#1EBC61', stroke: '#0EAC51' }, /*'tree-row-bar': { fill: '#1EBC61', stroke: '#0EAC51' }, 'tree-row-bar-polygon': { stroke: '#0EAC51' }*/ }, }, { id: 3, name: 'Make some noise', label: 'Courage is being scared to death, but saddling up anyway.', user: '<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>', parentId: 2, start: this.getDate(-24 * 3), duration: 2 * 24 * 60 * 60, progress: 100, type: 'task' }, { id: 4, name: 'Make some noise', label: 'Put that toy AWAY!', user: '<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>', start: this.getDate(-24 * 2), duration: 2 * 24 * 60 * 60, progress: 50, type: 'task', /* dependentOn: [3]*/ }, { id: 5, name: 'Make some noise', label: 'One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.', user: '<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>', parentId: 4, start: this.getDate(0), duration: 2 * 24 * 60 * 60, progress: 10, type: 'milestone', style: { base: { fill: '#0287D0', stroke: '#0077C0' } }, }, { id: 6, name: 'Make some noise', label: 'Butch Mario and the Luigi Kid', user: '<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>', parentId: 5, start: this.getDate(24), duration: 1 * 24 * 60 * 60, progress: 50, type: 'task', style: { base: { fill: '#8E44AD', stroke: '#7E349D' }, }, }, { id: 7, name: 'Make some noise', label: 'Devon, the old man wanted me, it was his dying request', user: '<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>', parentId: 2, /* dependentOn: [6],*/ start: this.getDate(24 * 2), duration: 4 * 60 * 60, progress: 20, type: 'task' }, { id: 8, name: 'Make some noise', label: 'Hey, Baby! Anybody ever tell you I have beautiful eyes?', user: '<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>', parentId: 7, /* dependentOn: [7],*/ start: this.getDate(24 * 3), duration: 1 * 24 * 60 * 60, progress: 0, type: 'task' }, { id: 9, name: 'Make some noise', label: 'This better be important, woman. You are interrupting my very delicate calculations.', user: '<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>', parentId: 8, /* dependentOn: [ 8, 7 ],*/ start: this.getDate(24 * 4), duration: 4 * 60 * 60, progress: 20, type: 'task', style: { base: { fill: '#8E44AD', stroke: '#7E349D' }, /*'tree-row-bar-polygon': { stroke: '#7E349D' }, 'tree-row-bar': { fill: '#8E44AD', stroke: '#7E349D' }*/ }, }, { id: 10, name: 'Make some noise', label: 'current task', user: '<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>', start: this.getDate(24 * 5), duration: 24 * 60 * 60, progress: 0, type: 'task' } ],

thanks

[renaudham]

More infos..

Note that it's purely a CSS issue.

I succedd to force to view the chart calendar by adding some CSS
gantt-elastic__main-view-container
float: left;
width: calc(100% - 610px);

gantt-elastic__task-list-container
float: left;

then the chart appear visible
BUT in this case I cannot scroll it at all... the bottom scroller does nothing..

[neuronetio]

I see in your code some settings that doesn't exists anymore.
Try settings, columns and task from this example
some options are evolving now so after update when something is not working properly take a look at examples folder vue.edit.html.

[neuronetio]

By the way, if you want to style some element you should pass css (as key:value pair) to styles option.
Initial style rules looks like this
Every element in gantt-elastic has its own class starting with gantt-elastic-.
Just ignore this prefix and you can modify those class inside settings.
It will be important later when gantt printing and image download feature will be added.

[renaudham]

Hi
Sorry, I applied all you new codes and latest version etc
the issue remain, as you can see the screenshot,

the gantt-elastic__task-list-container and gantt-elastic__main-view-container miss a float left
and the gantt-elastic__container miss a width

when I set a width to gantt-gantt-elastic__container
and add 2 float left, to gantt-elastic__task-list-container and gantt-elastic__main-view-container
it appear visually ok except that I cannot scroll left right the chart..

I tried a lot of combinations, like removing the gantt-elastic__svg-container > max-width: calc(100% - 17px);
==> same result, the chart appears with no way to scroll horizontally, but worse as I lose the vertical scrollbar

sorry for my specific case, any idea?

Note: I intend to put this in a future commercial product and therefore if I can sell it, give back a small % of the sales to you, when I would sell a version with gantt...
Still far from concrete currenlty and in tech prototype only..
my email: [email protected]

thanks

[neuronetio]

For those who will come with the same problem:
problem was in @renaudham vue app - styles from gantt was not attached to head for some reason.