Web AppBuilder Jewelry Box Theme Header Controller Height

NathanHeickLACSD — Tue, 19 Feb 2019 21:04:51 GMT

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

Re: Web AppBuilder Jewelry Box Theme Header Controller Height

NathanHeickLACSD — Sat, 11 Dec 2021 12:45:03 GMT

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: function() {
        if (this.position && this.position.height) {
          this.height = this.position.height;
        }

        html.setStyle(this.titleNode, {
          lineHeight: this.height + 'px'
        });

        html.setStyle(this.subtitleNode, {
          lineHeight: this.height + 'px'
        });

        query('.jimu-link', this.domNode).style({
          lineHeight: this.height + 'px'
        });
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

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

topic Web AppBuilder Jewelry Box Theme Header Controller Height in ArcGIS Web AppBuilder Questions

Web AppBuilder Jewelry Box Theme Header Controller Height

Re: Web AppBuilder Jewelry Box Theme Header Controller Height