4.23 renderPreviewHTML issue
Not listed in the breaking changes for the 4.23 release is that svg elements generated by the symbolUtils. renderPreviewHTML function now have their css display explicitly set to “block”. Previously this property was not set, and defaulted to the value of “inline”.
As can be seen in the image below, this makes a substantial difference in how they’re laid out on the page, which the browser's Developer Tools help show:
This image shows a custom symbol selector that allows a user to visually specify the value for a field associated with a UniqueValueRenderer when specifying a feature’s attributes. It uses a simple table where each cell is supposed to be center-aligned, but changes made to 4.23 throw it off.
I can’t think of a good reason why every image generated by renderPreviewHTML should be displayed as a block. If we wanted to do something as unusual as that, we could do it ourselves by wrapping it in a div, or better yet, adding our own CSS selectors. To get around this now, though, we either have to add application logic to set it back to inline, or add a CSS selector with an “!important” rule, neither of which is desirable.
Since we host a local copy of the JSAPI, I prefer just to prevent the addition altogether. The following shows how to do this for AMD-based solutions. Although the issue is found within the esri/symbols/support/svgUtils module, we made the change in the esri/widgets/Legend.js file since we use the Legend widget and it already contains a copy of that module.
In esri/widgets/Legend.js, search for:
{xmlns:"http://www.w3.org/2000/svg",width:C,height:G,style:"display: block;"}Replace with:
{xmlns:"http://www.w3.org/2000/svg",width:C,height:G/*,style:"display: block;"*/}
