Legend not showing in Expand widget

kenbuja

When I add the legend to an Expand widget, it is not showing up. When I explore the element in Development Tools, all of the legend components are there. The legend does show up if I add it directly to the view (line 14). What am I missing?

  view<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenLayerView</SPAN><SPAN class="punctuation token">(</SPAN>regionLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN>
    <SPAN class="token function">then</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">(</SPAN>layerView<SPAN class="punctuation token">)</SPAN> <SPAN class="operator token">=</SPAN><SPAN class="operator token">></SPAN> <SPAN class="punctuation token">{</SPAN>
      <SPAN class="keyword token">const</SPAN> legend <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Legend</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
        container<SPAN class="punctuation token">:</SPAN> document<SPAN class="punctuation token">.</SPAN><SPAN class="token function">createElement</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'div'</SPAN><SPAN class="punctuation token">)</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      <SPAN class="keyword token">const</SPAN> expand <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Expand</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
        expandIconClass<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'esri-icon-legend'</SPAN><SPAN class="punctuation token">,</SPAN>
        view<SPAN class="punctuation token">:</SPAN> view<SPAN class="punctuation token">,</SPAN>
        content<SPAN class="punctuation token">:</SPAN> legend<SPAN class="punctuation token">,</SPAN>
        expandTooltip<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Legend'</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

      view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>legend<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'bottom-right'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
      view<SPAN class="punctuation token">.</SPAN>ui<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>expand<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">'top-left'</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
    <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

RobertScheitlin__GISP

Ken,

   Your css rule is way to UN-specific. By having body, * that means everything gets  overflow hidden. You should really be more specific as to what you want to get overflow hidden. For your current css rule you would have to use:

      body<SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">*</SPAN> <SPAN class="punctuation token">{</SPAN>
        box<SPAN class="operator token">-</SPAN>sizing<SPAN class="punctuation token">:</SPAN> border<SPAN class="operator token">-</SPAN>box<SPAN class="punctuation token">;</SPAN>
        margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN>
        overflow<SPAN class="punctuation token">:</SPAN> hidden<SPAN class="punctuation token">;</SPAN>
        font<SPAN class="operator token">-</SPAN>family<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">'Open Sans'</SPAN>
      <SPAN class="punctuation token">}</SPAN>
      <SPAN class="punctuation token">.</SPAN>esri<SPAN class="operator token">-</SPAN>ui<SPAN class="operator token">-</SPAN>inner<SPAN class="operator token">-</SPAN>container <SPAN class="operator token">*</SPAN> <SPAN class="punctuation token">{</SPAN>
        overflow<SPAN class="punctuation token">:</SPAN> visible <SPAN class="operator token">!</SPAN>important<SPAN class="punctuation token">;</SPAN>
      <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

because the esri ui containers need to have overflow visible and most things under them as well.