Web AppBuilder Header widget and changing it's height when mobile

[KacieBaker]

I am trying to to modify the header height to shrink when it is mobile (along with changing the top margin of the SideBarController and map when the header shrinks). I start with a height of 114px and am trying to shrink it down to 40px once the screen size is 767px or smaller. I understand the HTML and CSS side but am having issues with the javascript and json since it pulls the header height from the config.json file and I am pretty new to js. I have already determined how to shrink the objects within the header (logos, nav, titles etc), but not the header height itself. If anyone has a way for this to be possible I would really appreciate it. Thank you in advance!

[Anonymous User]

Hi, Kacie

If you are trying to modify the height of the Header within "Header/Widget.js", you can use:

this.domNode.style.height = "40px"; To update the height of the header.

If from another widget, this will do the same thing:

var widgetManager = WidgetManager.getInstance();

var headerWidget = widgetManager.getWidgetsByName("Header")[0];

headerWidget.domNode.style.height = "40px";

And same applies to sidebar controller as well: var sidebarController = this.widgetManager.getWidgetsByName("SidebarController");

And another way is to use CSS to update layout:

When screen size is 767px or smaller, add a new class name to the body tag such as "is-mobile". And then use CSS to override default styles:

.is-mobile .jimu-widget-header {

     height: 40px !important;

}

Note that "!important" is used here to override inline styles, which is not the best to do, but in your case this should work no problem.

Hope this helps,

Yiwei

[KacieBaker]

Thank you Yiwei Ma, this solved my issue.

[MichaelGaigg]

of course you will need to include the WidgetManager to do what Yiwei mentioned

define([
   'jimu/WidgetManager'
],
function(WidgetManager) {

   var widgetManager = WidgetManager.getInstance();

});

[Anonymous User]

Thanks for pointing out