[REACT] Gantt: make larger "expand" event zone

[clovisapp]

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

[ghulam.ghous]

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;
    }
}
}