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.
Solved! Go to Solution.
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! 🙂
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>
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?
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.
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! 🙂
That has sorted things for me, thanks