3

How I can remove focused elements (tab, grid cells, etc.) outline in my ExtJS 6 app? Is there any global config for this?

Example:

enter image description here

I managed to remove outline for tabs, buttons and grid cells with this CSS rules

* {
  outline: none !important;
}

.x-grid-item-focused .x-grid-cell-inner:before {
  border: 0;
}

but unfortunatly for some focused elements it doesnt work. I noticed that for some components ExtJS add different CSS rules to add border / outlines.

For example to border layour split separator component added :after with outlines.

Is there any complex solution for this issue?

P.S. Why on Earth Sencha add this styles to framework without ability to remove it. IMO it's pretty annoying and complicates theming.

Sergey Novikov
  • 4,096
  • 7
  • 33
  • 59

2 Answers2

1

I had kinda same problem And i found this good blog about row-cell
here is the Blog
And here is the example Fiddle

here is the css code which remove grid focused row-cell border

.x-grid-item-focused .x-grid-cell-inner:before {
border: 0;

}

Salman hassan
  • 398
  • 6
  • 23
  • Yup, its like first link in Google. It solves issue with grid cells, but for other elements (border layout split panel for example) ExtjS add other rules (:after with outline). And I believe its not all cases. Im looking for complex solution. Thanks anyway. – Sergey Novikov Mar 22 '17 at 16:31
0

Not 100% sure what you need but you could set these variables in var/all.scss or packages/local/own-theme/classic/sass/var/view/Table.scss

$grid-row-cell-focus-border-color: transparent;
$grid-row-cell-focus-border-width: 0;
Nikos Js
  • 199
  • 2
  • 10