topic Re: ArcGIS JSAPI using CSS Grid for Layout in ArcGIS JavaScript Maps SDK Questions

ArcGIS JSAPI using CSS Grid for Layout

LanceCole — Mon, 07 Dec 2020 04:44:33 GMT

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.

The two examples are from @AllanLaframboise post on GitHub - GitHub - alaframboise/arcgis-js-app-patterns: Examples of how to accomplish simple app designs and styling with the ArcGIS JS API v4.

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.

Re: ArcGIS JSAPI using CSS Grid for Layout

RobertScheitlin__GISP — Mon, 07 Dec 2020 13:50:47 GMT

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; }

Re: ArcGIS JSAPI using CSS Grid for Layout

LanceCole — Mon, 07 Dec 2020 14:30:44 GMT

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?