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; } } }

[arcgis js api 4.*] remove blue frame/outline around MapView

DivisionSIG

Since javascript API vV4.* there is a blue outline around the map, when we interact with the view.

You can see this on the sample app https://developers.arcgis.com/javascript/latest/sample-code/intro-mapview/index.html Just move the map and you'll notice that blue outline around the view.

Do you know how to remove or disable that feature ?

thank you all

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Focus rectangles are an important part of accessibility. But if you really want to remove it anyway.

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

All comments

SebastianKrings

Hi, thanks.
That does work.
Accessability is a thing, yes, but the permanent toggling of the Map-Frame, when doing different interactions with tools, was irritating pretty much.

Sage_Wall

If / when you migrate to use the arcgis-map component, we added a css variable to change the focus color. If you are not concerned about accessibility you could set it to be transparent

    arcgis-map {
      --arcgis-view-color-focus: transparent;
    }

miro_aus

Adjusted for version 5.0.

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

Just a small accessibility note: while removing the focus outline may look better visually, it can make keyboard navigation less accessible. Keeping some subtle visible focus indicator is usually a better approach.

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

SebastianKrings

does not seem to work anymore in 5.x, any new idea?

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;
}

DivisionSIG

thank you, it worked

RobertScheitlin__GISP

Focus rectangles are an important part of accessibility. But if you really want to remove it anyway.

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

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.