How do I hide this blue outline?


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


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):


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 and]