Alter colour of MapView border when focused

Flookfinders · ‎09-14-2023

With version 4.27.6 of the API there is now a border displayed around the outside of the MapView. Presently this is black, but for the rest of my application we are using blue, so I am wondering how I can change the colour of this focus border to bring it line with the style used in the rest of our application? I cannot find any property that allows me to do this.

Martin_B · ‎10-03-2023

In React you can create a 'index.css' file and import it into your application's entrypoint like this:

import './index.css'

inside this file you can add the CSS provided by @JoelBennett.

.esri-view .esri-view-surface:focus::after {
    outline-color: #0000FF;
}

Alternatively, you can link the CSS-file to your primary HTML-file like this:

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="path-to-your-index.css" rel="stylesheet" />
  </head>
  <body>
    ...
  </body>
</html>

whichever method you employ, you must ensure that the official Esri CSS file is imported into your project before you modify it with your own CSS.

Hope this helps! 🙂

Martin I. Bekkos
Geodata AS - Esri Distributor Norway

View solution in original post

JoelBennett · ‎09-14-2023

You will need to add something like this somewhere below the tag in which you import the css theme file:

<style type="text/css">
.esri-view .esri-view-surface:focus::after {
    outline-color: #0000FF;
}
</style>

Flookfinders · ‎09-18-2023

I have tried adding the above code in various places within my application without any success. Would it make any difference that I am developing a React application?

JoelBennett · ‎09-18-2023

It would definitely make a difference if a shadow DOM is involved, but I haven't worked with React to know if that's the case in your situation or not. There's more info on that kind of thing in this post.

Martin_B · ‎10-03-2023

In React you can create a 'index.css' file and import it into your application's entrypoint like this:

import './index.css'

inside this file you can add the CSS provided by @JoelBennett.

.esri-view .esri-view-surface:focus::after {
    outline-color: #0000FF;
}

Alternatively, you can link the CSS-file to your primary HTML-file like this:

<!doctype html>
<html lang="en">
  <head>
    ...
    <link href="path-to-your-index.css" rel="stylesheet" />
  </head>
  <body>
    ...
  </body>
</html>

whichever method you employ, you must ensure that the official Esri CSS file is imported into your project before you modify it with your own CSS.

Hope this helps! 🙂

Martin I. Bekkos
Geodata AS - Esri Distributor Norway

4andy

This was working at API version 4.33 but at 4.34 it doesn't seem to be. I tried a few things but nothing seemed to work. Anyone have any ideas on how to change the color at 4.34 when using map components? Thanks.

Sage_Wall

I think the focus color is controlled by the browser, but you should be able to overwrite it with something like this

arcgis-map:focus {
    border: 5px solid #FF0000;
}

4andy

That seems to add to it actually - I get both borders.

I can see the css outline colors and style and when I change it in the browser dev tools it changes the right thing but I can't seem to overwrite those properties in the css file itself and have them applied for some reason.

Sage_Wall

yeah your right, my apologies. There might be something in the shadow-dom of the component. I'll ask around and see if I can get you an answer. I haven't been able to figure it out either. If I just add the :focus rule and then select the focus state in the dev tools it seems to work, but if I actually click on the map element I see the same thing you do with the interior blue border still present

Sage_Wall

There may be a big here @4andy you should be able to do it with a css variable, but it's not working as intended for the map. It is working for other components inside the map however. Still looking into this but a lot of people are out for the holidays at this time.

https://codepen.io/sagewall/pen/wBWvdmQ?editors=1010

If you wanted to do everything

  :root {
    --calcite-color-focus: #ff0000;
  }

A single component (isn't working for arcgis-map as far as I can tell):

arcgis-zoom {
  --calcite-color-focus: #ff0000;
}

Sorry for the previous bad advice and hopefully we can get the bug fixed.