topic Tab Theme header Height Web App Builder Developer Edition 2.16 with 5 logos in Web AppBuilder Custom Widgets Questions

Tab Theme header Height Web App Builder Developer Edition 2.16 with 5 logos

SumbleGhani_Shah — Thu, 07 May 2020 12:09:04 GMT

I have created an application using Tab theme of Web App Builder Developer Edition 2.16. i would like to increase the header height and add 3 to 4 logos within it. I am new in development, and sometimes i stuck with it and find some help through articles, videos and comments etc.

i tried to make the changes but couldn't with the relevant information regarding it;

Increase header height :

Tab themes > widgets > Header > CSS > style.css

.jimu-widget-header{
outline-offset: -2px !important;

// Added new
height:60px !important;
}

Add 2 more logos next to default logo

Tab themes > widgets > Header > Widget.html

// Added new
<img class="logo jimu-float-leading jimu-leading-margin1" style="margin-top:5px;" src="images/1_million.png" />
<img class="logo jimu-float-leading jimu-leading-margin1" style="margin-top:5px;" src="images/committee.png" />

Sidebar Panel to adjust top property as per height :

Tab themes > widgets > SidebarController > CSS

.jimu-widget-sidebar-controller .max-pane{
position: absolute;
top: 15px; // changed top property to 15
left: 0;
right: 0;
bottom: 26px;
border: 1px solid #111111;
}

Adjust the MapContainer(Zoom Slider, Home, Prev-Next extent button and Search widget) property as per header height :

Main Index.html page in style section at the end :

#map {
position: absolute;
background-color: rgb(238, 238, 238);
overflow: hidden;
min-width: 1px;
min-height: 1px;
left: 365px;
top: 60px !important;
right: 0px;
bottom: 24px;
width: auto;
height: auto;
padding: 0px;
margin: auto;
z-index: auto;
}

But with green highlighted portion of it, i do not know exactly, in which file where i could make changes.

Thanks

Sumble

Re: Tab Theme header Height Web App Builder Developer Edition 2.16 with 5 logos

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:59:38 GMT

Sumble,

The maps top position is controlled by the top property in the main config.json

map > position > top

  "map": {
    "3D": false,
    "2D": true,
    "position": {
      "left": 0,
      "top": 40,
      "right": 0,
      "bottom": 0
    },
...‍‍‍‍‍‍‍‍‍‍

Re: Tab Theme header Height Web App Builder Developer Edition 2.16 with 5 logos

SumbleGhani_Shah — Thu, 07 May 2020 18:51:15 GMT

Thank you Robert for your reply.

Can you please share with me a customized tab theme with title panel, which must be great in size and is able to incorporate 4 to 5 logos for marketing purpose.

Actually I am new in development and facing lots of problem such as my webmap do not upload and web app builder developer edition 2.16 always show, that it is uploading. But it doesn't. So in that case, I have to import my downloaded application and then it works fine.

Is it possible to customize choosen tab theme with our own imported webmap? I want to upload my webmap in "Creating new app". But the new created app do not upload my webmap.

Please help me, I have no idea actually.

Get Outlook for Android<https://aka.ms/ghei36>