topic Re: How to reduce the margin widgets - ui borders in ArcGIS JavaScript Maps SDK Questions

How to reduce the margin widgets - ui borders

VictorBerchet — Fri, 08 Jan 2021 22:14:21 GMT

I find that the widgets are placed too far away from the ui borders consuming precious screen real estate.

I was hopping that it would be easy to customize using the scss theme files but not really. Below is the markup:

<div class="esri-ui" style="inset: 0px;"> <div class="esri-ui-inner-container esri-ui-corner-container" style="inset: 15px 15px 30px;"> <div class="esri-ui-top-left esri-ui-corner"> [...]

The margins from the ui borders to the widgets is defined by `style=inset: 15px ...` making it harder to override.

Why is the rationale of having this hardcoded ? Should it be moved to the styles instead ?

One workaround is to use the infamous `!important` on one of the class but the inner-container class is also used at some other location and it messes with the UI layout. Is the corner-container class the one to update ? I haven't found it used anywhere else. If it is the cases what about moving the positions (inset) there ?

Thanks

Re: How to reduce the margin widgets - ui borders

RobertScheitlin__GISP — Mon, 11 Jan 2021 15:23:28 GMT

Victor,

Because the esri-ui-corner-container div has an inline style with the inset you can not do anything without the !important to override it.

Re: How to reduce the margin widgets - ui borders

VictorBerchet — Mon, 11 Jan 2021 22:55:52 GMT

Thanks for trying to help Robert but unless I miss something it doesn't really answer my questions - which might not be very clear:

1) Is esri-ui-corner-container the right class to override (or is it possibly used at some other places) ?

2) (to the ESRI team) Why is there an inline "inset" style instead of it being defined by the theme. It would make it easier to document and override this style.