Gantt column reorder border react

Suite and Optimus Suite 5
#1

Team, i need to change css of border which highlighting the drop area.

image
image977×194 8.96 KB

unable to find exact class name to change style.

#2

Hello @balaricky,

Could you please clarify on which exact component you are referring to, and provide more information about which exact element inside component you want to stylize, as it’s not clear from the provided screenshot.

Or create an example in our snippet tool:
https://snippet.dhtmlx.com/wuw43mv9

(open the snippet => reproduce your config => click the “Save” button => post here the newline)

Kind regards,

#3

Hello @balaricky,

An update on previous matter - if you meant reordering gantt columns styles, you can affect it with the following selector:

.gantt_grid_target_marker

and triangular edges are made with pseudo elements :before and :after

The default styles of this element look like this:

.gantt_grid_target_marker {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: var(--dhx-gantt-base-colors-primary);
    transform: translate(-1px);
}
.gantt_grid_target_marker:after {
    bottom: 0;
    border-bottom-color: var(--dhx-gantt-base-colors-primary);
}
.gantt_grid_target_marker:before, .gantt_grid_target_marker:after {
    display: block;
    content: "";
    position: absolute;
    left: -5px;
    width: 0px;
    height: 0px;
    border: 6px solid transparent;
}

If you want to change the color of the marker(border), you can redefine css variable --dhx-gantt-base-colors-primary at .gantt_grid_target_marker element:

.gantt_grid_target_marker {
   --dhx-gantt-base-colors-primary: red;
}

For anything more complex, you’ll need to redefine individual rules.

Kind regards,