search

bryntum / support

An issues-only repository for the Bryntum project management component suite which includes powerful Grid, Scheduler, Calendar, Kanban Task Board and Gantt chart components all built in pure JS / CSS / TypeScript
https://www.bryntum.com
54 stars 6 forks source link

RowReorder grip unaligned in RowNumber column #10106

Closed JockeLindberg closed 1 month ago

JockeLindberg commented 1 month ago

Forum post

Hi, While testing the cell selection feature, we encountered a few bugs that we'd like to report. All of these issues can be reproduced in the demo: https://bryntum.com/products/gantt/examples/cellselection/ (with rownumber column added)

2) Task Reordering Icon Alignment The grip icon used for task reordering is not properly aligned horizontally. To show the icons and be able to reproduce this in the demo, you have to enable this feature:

features: {
    rowReorder: true,
    ...
},

GripIconAlignment.png

We resolved this on our end by applying a custom CSS class (fix-grip) to the row:

columns: [
    { id: 'rownumber', type: 'rownumber', text: '#', cellCls: 'fix-grip' },
    ...
]

.fix-grip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

Note: We had to add font-weight: 600 to ensure the icon displayed correctly, though we’re not sure if this was just an issue on our side. In your demo, the icon shows up correctly, it's just the alignment that is slightly off.