topic Formatting the space between widgits in ArcGIS JavaScript Maps SDK Questions

Formatting the space between widgits

GregSalvador — Tue, 22 Aug 2017 15:24:08 GMT

Hi all,

I am putting several widgets in my mapView. Everything works fine, but I have noticed there is a gap in-between the widgets that I didn't define. Is there a way to change how big the space is? Here is the code I am using, nothing fancy:

//LayerListWidget initialization
var layerList = new LayerList({
view: view,
});
view.ui.add(layerList, "top-right");

//initialization of the basemapGallery widget
var basemapGallery = new BasemapGallery({
view: view,
});
view.ui.add(basemapGallery, {
position: "top-right"
});

//initializing the Scale Bar widget
var scaleBar = new ScaleBar({
view: view,
unit: "non-metric"
});
view.ui.add(scaleBar, {
position: "top-right"
});

Re: Formatting the space between widgits

ThomasSolow — Sun, 12 Dec 2021 03:45:10 GMT

In the top-right ui holder, the space between widgets is decided by margin-bottom, so you could add a new CSS rule like:

.esri-ui-top-right .esri-component{
  margin-bottom: 0;
 }‍‍‍‍‍‍

sample: JS Bin - Collaborative JavaScript Debugging

(default is 10x, 0 results in some overlap)

Re: Formatting the space between widgits

GregSalvador — Tue, 22 Aug 2017 16:12:15 GMT

Thanks a bunch Thomas, i uhhhh never thought to check the css style haha.