Web AppBuilder Jewelry Box Theme Header Controller Height

NathanHeickLACSD

Good Afternoon,

I am trying to use two different heights for the header controller in the Jewelry Box Theme.  I have set different heights in the layout config for the desktop layout and the mobile layout.  It works when you load up the page, however, it does not work properly when you resize the page and go from the mobile layout to the desktop layout and vice versa.  The height stays the same.  It looks like the height is obtained from the config after is created, but it is not updated when the window is resized.  Any ideas on the proper way to do this?

Thanks,

Nathan

NathanHeickLACSD

The following worked for me in Chrome and Firefox so far.  I updated the method _setElementsSize of the HeaderController widget.  It sets this.height using this.position, which gets updated based on the height of the HeaderController Widget.  It in turn gets updated based on the desktop and mobile layout configs.

      _setElementsSize<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
        <SPAN class="keyword token">if</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>position <SPAN class="operator token">&&</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>height<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
          <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>height <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>height<SPAN class="punctuation token">;</SPAN>
        <SPAN class="punctuation token">}</SPAN>

        html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>titleNode<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
          lineHeight<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>height <SPAN class="operator token">+</SPAN> <SPAN class="string token">'px'</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        html<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setStyle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>subtitleNode<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
          lineHeight<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>height <SPAN class="operator token">+</SPAN> <SPAN class="string token">'px'</SPAN>
        <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

        <SPAN class="token function">query</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">'.jimu-link'</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>domNode<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">style</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
          lineHeight<SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">this</SPAN><SPAN class="punctuation token">.</SPAN>height <SPAN class="operator token">+</SPAN> <SPAN class="string token">'px'</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>‍</SPAN></SPAN>

Now, the header controller adjusts its height automatically based on the heights in the layout config.