topic Re: launchpad theme height in Web AppBuilder Custom Widgets Questions

launchpad theme height

LefterisKoumis — Sun, 12 Dec 2021 09:16:28 GMT

Is it possible to insert across the page on the top of the lanuchpad theme a div that host among other components, your own menu? I was able to do that in flex by modifying the index.html, but it proves to be more difficult with the js due to the claro class. The primary target for this app is for the desktop user, not the mobile user.

Thank you.

<body class="claro jimu-main-font">
  <div style="height:50px; width:100%; text-align:left; background-color:#3892D2">
  <div id="main-loading">

Re: launchpad theme height

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:16:30 GMT

Lefteris,

You need to place your div in the mani-page div.

<div id="main-page">
      <div style="height:50px; width:100%; text-align:left; background-color:#3892D2"/>
      <div id="jimu-layout-manager"></div>
    </div>

and set the main config.json map objects top property to 50.

"map": {
    "3D": false,
    "2D": true,
    "position": {
      "left": 0,
      "top": 50,

Re: launchpad theme height

LefterisKoumis — Sun, 12 Dec 2021 09:16:33 GMT

Robert, it works. However, when I enter content in that div, it creates another 50px space under the original div. How can I prevent this?

Thank you

<div id="main-page">
   <div style="width:100%; text-align:left; background-color:#3892D2">
    <script>      
          if ( window.location.href.indexOf("district1/") > -1) {
            document.write('<img src="assets/images/banner1.jpg"  height="50" />');
          } else if ( window.location.href.indexOf("district8/") > -1) {
            document.write('<img src="assets/images/banner8.jpg"  height="50" />');
          } else { 
            alert("no district image");
          }
      
    </script>
   </div>
<div id="jimu-layout-manager"></div>

Re: launchpad theme height

RobertScheitlin__GISP — Thu, 18 Feb 2016 17:48:46 GMT

Lefteris,

Because the div is being added above the "jimu-layout-manager" div there is actually no need for the config.json map change (set the top property back to 0):

"map": {

"3D": false,

"2D": true,

"position": {

"left": 0,

"top": 0,

"right": 0,

"bottom": 0

Re: launchpad theme height

LefterisKoumis — Thu, 18 Feb 2016 19:36:54 GMT

Thank you. I ended up moving the "jimu.." above the div and changed the config.json to top:85 because I wanted to add another div for a custom menu under the banner.

Re: launchpad theme height

LefterisKoumis — Fri, 19 Feb 2016 15:57:42 GMT

Robert, I how do I change the locations of the tools pop ups when you click on a folder? I assume with the above modifications it affected the display location. Thanks.

Re: launchpad theme height

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:16:35 GMT

Lefteris,

You will have to change the AnchorBarController

[install dir]\server\apps\[app#]\themes\LaunchpadTheme\widgets\AnchorBarController\Widget.js

(Change line 6)

    _getOffPanelPosition: function(dockableItem, widgetBox){
      var position = {},
          iconBox = domGeometry.position(dockableItem.iconItemNode),
          mapBox = domGeometry.getContentBox(jimuConfig.mapId);

      position.bottom = mapBox.h - (iconBox.y - (MIN_MARGIN + 50));

      if (window.isRTL) {
        if(iconBox.x + iconBox.w - widgetBox.w < 0){
          position.left = 0;
        }else{
          position.left = iconBox.x + iconBox.w - widgetBox.w;
        }
      } else {
        if(iconBox.x + widgetBox.w > mapBox.w){
          position.right = 0;
        }else{
          position.right = mapBox.w - iconBox.x - widgetBox.w;
        }
      }
      return position;
    },

Re: launchpad theme height

LefterisKoumis — Wed, 24 Feb 2016 18:38:54 GMT

Thank you.

Re: launchpad theme height

LefterisKoumis — Tue, 15 Mar 2016 17:04:48 GMT

Robert,

Sometimes, I noticed that when I access the app on another workstation that have smaller resolutions the tools from the launchpad theme appear on the right side of the screen! Can it be prevented and be displayed on the top of the menu? Thank you.

Re: launchpad theme height

RobertScheitlin__GISP — Tue, 15 Mar 2016 17:53:19 GMT

Lefteris,

I don't use the launchpad theme with a header like you are doing here so I have not seen this and don't have any suggestions.

Re: launchpad theme height

LefterisKoumis — Sun, 12 Dec 2021 09:16:38 GMT

Hello Robert. It seems that this customization does not apply for the 2.0 version. Position.bottom has no effect on the location of the tools. How can it be resolved? Thank you.

UPDATE 5/9

For those of you who want to perform m the same task in the version 2.0, just change the position.top under the _getGroupPanelPosition (don't confuse it with the _getOffPanelPosition).

In my case, in line 5, I subtracted 100 px from the position.top.

_getGroupPanelPosition: function(dockableItem, widgetBox){
      var position = {},
        iconBox = domGeometry.position(dockableItem.iconItemNode),
        mapBox = domGeometry.getContentBox(jimuConfig.mapId);
      position.top = iconBox.y - widgetBox.h - MIN_MARGIN-100;
      if (window.isRTL) {
        if(iconBox.x < widgetBox.w + MIN_MARGIN){
          position.left = MIN_MARGIN;
        }else{
          position.left = iconBox.x - widgetBox.w + iconBox.w;
        }
      } else {
        if(iconBox.x + widgetBox.w + MIN_MARGIN > mapBox.w){
          position.left = mapBox.w - widgetBox.w - MIN_MARGIN;
        }else{
          position.left = iconBox.x;
        }
      }
      return position;
    },

Re: launchpad theme height

LefterisKoumis — Tue, 11 Apr 2017 21:46:48 GMT

Robert, I am trying to accomplish similar task with the foldable theme. Move the header 50px so I can place a div above it. However what ever I tried, including a fixed div, the header is not moving. thanks.

Re: launchpad theme height

RobertScheitlin__GISP — Tue, 11 Apr 2017 22:37:51 GMT

I am not in front of a computer right now but I think you need to move the header widget down using the main config.json

Re: launchpad theme height

LefterisKoumis — Tue, 11 Apr 2017 22:40:40 GMT

Thank you.