topic Web AppBuilder Header widget and changing it's height when mobile in ArcGIS Web AppBuilder Questions

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

KacieBaker — Fri, 05 Jun 2015 16:02:59 GMT

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!

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

Anonymous User — Mon, 08 Jun 2015 18:56:13 GMT

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

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

KacieBaker — Wed, 10 Jun 2015 22:06:26 GMT

Thank you Yiwei Ma, this solved my issue.

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

MichaelGaigg — Thu, 18 Jan 2018 17:47:25 GMT

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

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

var widgetManager = WidgetManager.getInstance();

});

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

Anonymous User — Thu, 18 Jan 2018 17:50:22 GMT

Thanks for pointing out