How do I hide this blue outline?


#1

The question says it all. To hide this blue outline, what class do I have to apply outline: none to?


#2

Hello,
I assume that you’ve got a custom CSS rule for selected or on hover Gantt row. By default, Gantt doesn’t have an outline for these cases, so you need to disable outline to the following classes:
In case of selected row:

.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
	outline: none;
}

In case of hovering on the row:

.gantt_grid_data .gantt_row.odd:hover,
.gantt_grid_data .gantt_row:hover {
	outline: none;
}

Please check the example (uncomment the CSS rules to see the changes):
https://snippet.dhtmlx.com/jeospcbm


#3

Well, not really. This blue border/outline we see gets added to focused grid items when the keyboard navigation plugin is enabled. And it’s not the CSS outline property, but instead a box shadow. I managed to get rid of it by setting box-shadow to none.

A note to the developers: box-shadow shouldn’t be used as a focus indicator [more details at https://www.w3.org/WAI/GL/2016/WD-WCAG20-TECHS-20160105/F78 and https://stackoverflow.com/a/52616313/2243767]