nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Viewer inset outline

JethroLeevers

The new viewer seems to have a style on focus ( .esri-view-surface--inset-outline ), this adds a border to the viewer, is there any way to stop this from happening, I tried removing it from the dom on view.when but it seemed to re-add the style on focus.

Find more posts tagged with

Accepted answers

Egge-Jan_Pollé

Hi Jethro Leevers,

Did you see this thread? [arcgis js api 4.*] remove blue frame/outline around MapView

There Robert Scheitlin, GISP‌ suggests the following solution, using CSS:

<SPAN class="selector token">.esri-view .esri-view-surface--inset-outline:focus::after</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">outline</SPAN><SPAN class="punctuation token">:</SPAN> none <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

HTH,

Egge-Jan

All comments

miro_aus

Version 5.0

.esri-view .esri-view-surface:focus::after,
.esri-view .esri-view-surface:focus-visible::after { 
  outline: none !important; 
}

Or use a subtle outline instead, as removing focus outlines is not ideal for accessibility.

.esri-view .esri-view-surface:focus::after, 
.esri-view .esri-view-surface:focus-visible::after { 
  outline: 4px solid rgba(255, 255, 255, 0.25); 
  outline-offset: -4px; 
}

MiroslavUmlauf

Indeed it stopped working due to change of DOM inside view from version 4.26 to 4.27. Updated CSS adjusted by this change:

.esri-view .esri-view-surface--touch-none:focus::after {
  outline: none !important;
}

Nicolas_

I think this solution stopped working in version 4.27

Egge-Jan_Pollé

Hi Jethro Leevers,

Did you see this thread? [arcgis js api 4.*] remove blue frame/outline around MapView

There Robert Scheitlin, GISP‌ suggests the following solution, using CSS:

<SPAN class="selector token">.esri-view .esri-view-surface--inset-outline:focus::after</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="property token">outline</SPAN><SPAN class="punctuation token">:</SPAN> none <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

HTH,

Egge-Jan

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.