Resource allocation not visible when timerange is above in resource utilization

[taauntik]

Forum post

It can be reproduced by the following steps:

1. Open resource utilization example ( https://bryntum.com/examples/gantt/resourceutilization/ )
2. Place the following code in the code editor:

   
   import { Gantt, ProjectModel, ResourceUtilization, Splitter, DateHelper, AvatarRendering } from '../../build/gantt.module.js?459924';
   import shared from '../_shared/shared.module.js?459924';

const project = new ProjectModel({ transport : { load : { url : '../_datasets/timeranges.json' } },

autoLoad : true,

// This config enables response validation and dumping of found errors to the browser console. // It's meant to be used as a development stage helper only so please set it to false for production systems. validateResponse : true });

const gantt = new Gantt({ project, appendTo : 'container', viewPreset : 'weekAndDayLetter', tickSize : 40, columnLines : true, features : { timeRanges : { enableResizing : true, showCurrentTimeLine : false, showHeaderElements : true } }, columns : [ { type : 'name', width : 280 }, { type : 'resourceassignment', showAvatars : true, width : 170 } ] });

new Splitter({ appendTo : 'container' });

const resourceUtilization = new ResourceUtilization({ appendTo : 'container', project, partner : gantt, rowHeight : 40, showBarTip : true, features : { timeRanges : { enableResizing : true, showCurrentTimeLine : false, showHeaderElements : true } }, columns : [ { type : 'tree', field : 'name', width : 280, text : 'Resource / Task', renderer({ record, grid, value }) { // lets show event start/end for assignment row if (record.origin.isResourceModel) { const resource = record.origin;

        return {
            class    : 'b-resource-info',
            children : [
                value
            ]
        };
    }
    else {
        return value;
    }
}

}, { cellCls : 'taskDateRange', renderer({ record, value }) { // Show event start/end for assignment row if (record.origin.isAssignmentModel) { const task = record.origin.event;

        return DateHelper.format(task.startDate, 'MMM Do') + ' - ' + DateHelper.format(task.endDate, 'MMM Do');
    }

    return '';
}

} ], bbar : { cls : 'utilization-toolbar', height : '3em', items : [ { type : 'checkbox', ref : 'showBarTip', text : 'Enable bar tooltip', tooltip : 'Check to show tooltips when moving mouse over bars', checked : true, onAction : 'up.onShowBarTipToggle' } ] }, onShowBarTipToggle({ source }) { resourceUtilization.showBarTip = source.checked; } });

project.load();

project.on('load', () => { resourceUtilization.features.timeRanges.timeRanges[2].style = 'background: lightblue;'; });

3. Drag Configure ports within Audit TimeRange
4. The Resource Allocation is not visible.

[isglass]

Probably only need to adjust z-index