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