Scheduler header cell position doesn't match column lines

[JohnKis]

In cases where columns in the scheduler have non-integer widths, the positioning of the header cells don't match the position of the column lines below.

See the second day (27th) on the zoomed in screenshot below. It's clear that the next day (along with the left border) is shifted which results in a slightly misaligned line and a gap between the cell for the 27th and 28th.

Looking into the issue it seems to be caused by the the header cells being positioned using left while the column lines are positioned using translateX(). translateX() seems to do a better job at laying out elements on sub pixels so I think it'd sensible to use it for the header cell positions as well.

[matsbryntse]

Thanks for reporting! Do you have a test case to share to reproduce this?

[JohnKis]

It's a bit tricky to reproduce in a test case because it depends on the size of the viewport and the number of columns but I managed to create a test case:

• Open a browser window and open the responsive example https://bryntum.com/products/scheduler/examples/responsive/
• Resize the browser window to be 1280px in width
• Replace the JS and CSS with the attached example: example.zip
• Notice that the green background is vaguely visible next the the green cell background on Tuesday and Wednesday

https://github.com/bryntum/support/assets/3939741/fff06a0d-75ae-4626-be1c-4dcceac502ea

[matsbryntse]

@JohnKis Are you still able to reproduce this in 6.0+?

[JohnKis]

Hi @matsbryntse,

Yes, I can still reproduce this on the latest version using the same demo: https://bryntum.com/products/scheduler/examples/responsive/

The repro steps are a bit different given that the code editor doesn't accept any of my changes to the JS file:

• Open a browser window and open the responsive example https://bryntum.com/products/scheduler/examples/responsive/
• Resize the browser window to be 1280px in width
• Replace the CSS with the following:

  
  .b-grid-header-container .b-sch-timeaxiscolumn {
  background-color: red !important;

}

.b-grid-header-container .b-sch-timeaxiscolumn .b-sch-header-timeaxis-cell { background-color: green !important; }

.b-resource-info dl { margin: 0; }

.b-responsive-small .b-sch-style-border.b-sch-event { font-size: 10px; font-weight: 300; } .b-responsive-small .b-resource-info { flex-direction: column; justify-content: space-evenly; } .b-responsive-small .b-resource-info dd { display: none; } .b-responsive-small .b-resource-info img { margin-inline-end: 0; } .b-responsive-small .b-grid-header { font-size: 0.8em; }

container {

justify-content: center; background: #ccc; }

.b-scheduler { box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); align-self: center !important; width: 100%; }

@media screen and (max-width: 800px) { .b-label[data-ref=forceLabel], .b-buttongroup[data-ref=levelPicker] { display: none; } }

- Notice that the red background is vaguely visible next the the green cell background on Wednesday and Friday

[matsbryntse]

The repro steps are a bit different given that the code editor doesn't accept any of my changes to the JS file:

Thanks for the feedback, we'll take a look. Curious about this part, is the new code editor not working for you?

[JohnKis]

Thank you! I tried the editor again, and it worked this time. I suppose that issue might have been that I pasted my previous example instead of editing manually.

[matsbryntse]

@JohnKis I still cannot repro. Are you using Win/Mac/Linux?

Also, what if you try upgrading Chrome to latest?

[JohnKis]

@matsbryntse I'm on Mac and the latest Chrome (127.0.6533.120).

I'm still able to reproduce via the following steps:

• Open a browser window and open the responsive example https://bryntum.com/products/scheduler/examples/responsive/
• Resize the browser window to be 1279px in width
• Replace the CSS with the following:

  
  .b-grid-header-container .b-sch-timeaxiscolumn {
  background-color: red !important;

}

.b-grid-header-container .b-sch-timeaxiscolumn .b-sch-header-timeaxis-cell { background-color: green !important; }

.b-resource-info dl { margin: 0; }

.b-responsive-small .b-sch-style-border.b-sch-event { font-size: 10px; font-weight: 300; } .b-responsive-small .b-resource-info { flex-direction: column; justify-content: space-evenly; } .b-responsive-small .b-resource-info dd { display: none; } .b-responsive-small .b-resource-info img { margin-inline-end: 0; } .b-responsive-small .b-grid-header { font-size: 0.8em; }

container {

justify-content: center; background: #ccc; }

.b-scheduler { box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); align-self: center !important; width: 100%; }

@media screen and (max-width: 800px) { .b-label[data-ref=forceLabel], .b-buttongroup[data-ref=levelPicker] { display: none; } }

- Replace the JS with the following (or just change the endDate to `new Date(2018, 4, 17)`)
```js
import { Scheduler } from '../../build/scheduler.module.js?478494';
import shared from '../_shared/shared.module.js?478494';

const scheduler = new Scheduler({
    appendTo           : 'container',
    startDate          : new Date(2018, 4, 14),
    endDate            : new Date(2018, 4, 17),
    autoAdjustTimeAxis : false,
    viewPreset         : 'dayAndWeek',
    barMargin          : 5,
    eventStyle         : 'border',
    resourceImagePath  : '../_shared/images/users/',

    responsiveLevels : {
        small : {
            levelWidth : 800,
            tickSize   : 127,
            fillTicks  : true,
            rowHeight  : 40
        },
        normal : {
            levelWidth : '*',
            tickSize   : 150,
            fillTicks  : false,
            rowHeight  : 50
        }
    },

    columns : [
        {
            type             : 'resourceInfo',
            text             : 'Name',
            field            : 'name',
            responsiveLevels : {
                small  : { width : 70 },
                normal : { width : 130 }
            }
        },
        {
            text             : 'Role',
            field            : 'role',
            width            : 120,
            responsiveLevels : {
                small  : { hidden : true },
                normal : { hidden : false }
            }
        }
    ],

    eventStore : {
        readUrl  : 'data/events.json',
        autoLoad : true
    },

    resourceStore : {
        readUrl  : 'data/resources.json',
        autoLoad : true
    },

    listeners : {
        responsive({ source : scheduler, level }) {
            scheduler.widgetMap.currentLevel.html = `Responsive level: <b style="margin-inline-start : .5em">${level}</b>`;
        }
    },

    tbar : [
        {
            ref  : 'forceLabel',
            type : 'label',
            text : 'Force'
        },
        {
            ref         : 'levelPicker',
            type        : 'buttongroup',
            toggleGroup : true,
            items       : [
                {
                    text              : 'Small',
                    schedulerMaxWidth : 700
                },
                {
                    text              : 'Normal',
                    schedulerMaxWidth : 1000
                },
                {
                    text              : 'None',
                    pressed           : true,
                    tooltip           : 'Level is decided by browser window width',
                    schedulerMaxWidth : null
                }
            ],
            onClick({ source : button }) {
                scheduler.maxWidth = button.schedulerMaxWidth;
            }
        },
        '->',
        {
            ref  : 'currentLevel',
            type : 'label',
            text : 'Responsive level:'
        }
    ]
});

After these steps you should be able to see the red background behind the middle column (Tuesday) and on the right side of the header. The issue is not specific to the suggested screen width and configuration (it keeps appearing and disappearing as you resize) but I wanted to provide a reliable repro case.