launchpad theme height

2766
13
Jump to solution
02-16-2016 02:40 PM
LefterisKoumis
Occasional Contributor III

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">
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

    },

View solution in original post

13 Replies
RobertScheitlin__GISP
MVP Emeritus

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,
LefterisKoumis
Occasional Contributor III

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>
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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

    },

LefterisKoumis
Occasional Contributor III

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.

0 Kudos
LefterisKoumis
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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;
    },
LefterisKoumis
Occasional Contributor III

Thank you.

0 Kudos
LefterisKoumis
Occasional Contributor III

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

0 Kudos