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

タグ付きの投稿をもっと見る

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

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>

DivisionSIG

thank you, it worked

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

SebastianKrings

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

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

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

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.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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