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

5390
4
06-05-2015 09:02 AM
KacieBaker
New Contributor II

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!

Kacie Baker
GIS Software Architect
Maricopa County | Office of Enterprise Technology
0 Kudos
4 Replies
YiweiMa
Esri Contributor

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
New Contributor II

Thank you Yiwei Ma, this solved my issue.

Kacie Baker
GIS Software Architect
Maricopa County | Office of Enterprise Technology
0 Kudos
MichaelGaigg
New Contributor II

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

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

   var widgetManager = WidgetManager.getInstance();

});

YiweiMa
Esri Contributor

Thanks for pointing out

0 Kudos