How to reduce the margin widgets - ui borders

01-08-2021 02:13 PM
New Contributor III

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 ?




2 Replies
MVP Esteemed Contributor


   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.

0 Kudos
New Contributor III

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.

0 Kudos