ArcGIS JSAPI using CSS Grid for Layout

397
2
Jump to solution
12-06-2020 08:44 PM
LanceCole
MVP Regular Contributor

I am working on a new app were the map is not the primary focus.  I am using CSS Grid and Flex to layout the single page.  I noticed that the mapView focus rectangle around the map when active is not displaying correctly when the containing DIV is placed using Grid or Flex.  Below are screen shots showing the difference between the two.  The first being a normal DIV placed as a block and the second placed using CSS Grid.

Capture_01.PNGCapture_02.PNG           

The two examples are from @AllanLaframboise post on GitHub - GitHub - alaframboise/arcgis-js-app-patterns: Examples of how to accomplish simple app designs and s...

I also tried to remove the focus rectangle by adding the following to my CSS as noted by @RobertScheitlin__GISP .

 

.esri-view .esri-view-surface--inset-outline:focus::after {
  outline: none !important;
}

 

 

This removes the focus rectangle from the normal DIV but has no affect on the one placed using CSS Grid.

Any ideas on how to clean this up or remove the focus rectangle from a DIV placed using CSS Grid?  It does not appear to be causing any other issues other than it really looks bad.

 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Lance,

   Here is a css rule that works on my end using Chrome and IE 11, for removing the focus ring.

 

    .esri-view:focus, 
    .esri-view-root:focus,
    .esri-view .esri-view-surface:focus {
      outline: -webkit-focus-ring-color none !important;
    }

 

View solution in original post

2 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Lance,

   Here is a css rule that works on my end using Chrome and IE 11, for removing the focus ring.

 

    .esri-view:focus, 
    .esri-view-root:focus,
    .esri-view .esri-view-surface:focus {
      outline: -webkit-focus-ring-color none !important;
    }

 

LanceCole
MVP Regular Contributor

Thanks Robert, spot on as usual.

Before applying your CSS, I did notice if you refresh the browser and click on the map area before the basemap renders you can see the correct focus rectangle.  However, the basemap appears to be rendering on top of the focus rectangle despite its z-order being set to 999.  Can this be addressed similarly using CSS to correct?

0 Kudos