CODEWITHSUNDEEP
extjsextjs6
Sergey Novikov
Sergey Novikov

Reputation: 4196

ExtJS 6 Remove focused elements outline

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.

Upvotes: 3

Views: 2115

Answers (2)

Nikos Js
Nikos Js

Reputation: 199

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;

Upvotes: 0

Salman hassan
Salman hassan

Reputation: 398

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;

}

Upvotes: 1

Related Questions