topic Re: Width issues with esri/dijit/ColorPicker in ArcGIS JavaScript Maps SDK Questions

Width issues with esri/dijit/ColorPicker

KenDoman — Mon, 11 May 2015 20:48:17 GMT

I've put this on here, because I have no idea where else to file bug reports or issues with esri dijits.

I've incorporated the esri/dijit/ColorPicker from the ArcGIS JavaScript API (v. 3.13). When viewing the application, I noticed a weird issue with the size/border of the ColorPicker.

I attempted to recreate the issue using JSFiddle (ESRI - dijit - ColorPicker - JSFiddle)). The funny thing was, when I viewed the results, everything looked fine, as you can see when you follow the link.

So I looked back through my application, trying to find out what the difference was. Digging into the CSS, I found that the CSS box-sizing property for all items in my application was set to border-box, while without it, the css box-sizing defaults to content-box. When I applied the box-sizing of border-box to the .esriColorPicker class, I was able to recreate the issue. ESRI - dijit - ColorPicker (with error) - JSFiddle

In order to keep the width of the ColorPicker dijit from messing up, perhaps they should assign a box-sizing property to its style.

Like I said, I didn't know where else to post this information.

Re: Width issues with esri/dijit/ColorPicker

Juan_CarlosFranco — Sat, 11 Dec 2021 19:58:33 GMT

Hi Ken,

The widget was styled using box-sizing’s default (content-box), so this is why the layout gets messed up when it's changed to border-box.

Workaround

.esriColorPicker { 
  box-sizing: border-box; 


  /* original width 195px + 15px left padding + 2px left border + 15px right padding + 2px right border */
  width: 229px; 
}

Updated fiddle.

Re: Width issues with esri/dijit/ColorPicker

KenDoman — Tue, 12 May 2015 14:02:24 GMT

Yeah, that's one way to do it. I explicitly assigned the box-sizing to content-box for my app. Thankfully there's more than one way to skin that cat. I just wanted the information out there in case others ran into the same issues.

.esriColorPicker { box-sizing: content-box; }