Select to view content in your preferred language

Alter colour of MapView border when focused

550
5
Jump to solution
09-14-2023 12:07 AM
Flookfinders
New Contributor II

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.

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
Martin_B
Esri Contributor

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

5 Replies
JoelBennett
MVP Regular Contributor

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
New Contributor II

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?

0 Kudos
JoelBennett
MVP Regular Contributor

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.

0 Kudos
Martin_B
Esri Contributor

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
Flookfinders
New Contributor II

That has sorted things for me, thanks

0 Kudos