Premium support for our pure JavaScript UI components
Hi Bryntum team,
What is the best way to expand the right side of a Gantt event to expand it (|| button in the screen bellow) ? (the part that can be dragged to expand an event duration).
Note: i tried using css, but looks like it's not enough to make the zone fully "draggable", as it's often confusing with a whole event drag (and not just extending the event)
Thanks a lot for your help
Attachments
Screenshot 2024-03-25 at 18.45.54.png (12.84 KiB) Viewed 495 times
Hi there,
Please look at the following css that is used for the handle being used to resize events. You can edit it to meet your requirements:
.b-sch-event-resizable-true,
.b-sch-event-resizable-start,
.b-sch-event-resizable-end {
--handle-size: 5em;
@media (pointer : coarse) {
--handle-size: 5em;
}
&::before,
&::after {
--handle-width: 109px; // Using px since gradient is in px
--handle-height: 50%;
--handle-inset: 3px; // Ditto
--handle-align-inset: 25%;
--gradient-dir: to right;
--handle-opacity: 0.7;
@media (pointer : coarse) {
--handle-width: 1.7em;
--handle-inset: 0.7em;
}
--clip-path : inset(0 0 0 var(--handle-inset));
position : absolute;
clip-path : var(--clip-path);
left : 0;
top : var(--handle-align-inset);
width : var(--handle-width);
height : var(--handle-height);
opacity : var(--handle-opacity);
// Gripper image of fine parallel lines
background : linear-gradient(var(--gradient-dir), #fff 1px, transparent 1px);
background-size : 2px;
background-position : var(--handle-inset);
}
&::after {
--clip-path: inset(0 var(--handle-inset) 0 0);
left: auto;
right: 0;
}
.b-sch-vertical & {
&::before,
&::after {
--handle-width: 50%;
--handle-height: 0.7em;
--gradient-dir: to bottom;
background-size: 100% 2px;
--clip-path: inset(var(--handle-inset) 0 0 0);
@media (pointer : coarse) {
--handle-height: 1.7em;
}
top : 0;
left : var(--handle-align-inset);
}
&::after {
--clip-path: inset(0 0 var(--handle-inset) 0);
top: auto;
bottom: 0;
}
}
}