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