nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Layer List auto start location change

LeoLadefian4

How do i set the location of the Layer List when auto start is set to true. The Layer List covers up the zoom in and out buttons in the Launchpad Theme

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Leo,

There is no configuration for this so you have to edit the

[install dir]server\apps\[ap number]\themes\LaunchpadTheme\panels\LaunchpadPanel\Panel.js

When you open this file find this function:

setPosition: function(position){
      var style, box, row, col, size;

      box = this._getLayoutBox();
      size = Math.floor(box.w / (position.width + position.margin));

      row = Math.floor(position.index / size);
      col = position.index % size;
      position.left = (row + 1) * position.margin + col * (position.width + position.margin);
      position.top -= position.margin * row;
      position.left += 50;

      this.position = lang.clone(position);

      if(window.appInfo.isRunInMobile){
        position.left = 0;
        position.top = box.h / 2;
        position.width = box.w;
        position.height = box.h / 2;
      }

      style = utils.getPositionStyle(position);
      style.position = 'absolute';

      domConstruct.place(this.domNode, jimuConfig.mapId);
      domStyle.set(this.domNode, style);

      this._onResponsible();
    },

and add line 11 above

All comments

LeoLadefian4

This is what I'm looking at in the code, a little different than what you show.

_setPositionStyle: function(a) {

var b;

this.position.zIndex && (a.zIndex = this.position.zIndex);

this.position.left = a.left;

this.position.top =

a.top;

this.position.width = a.width;

this.position.height = a.height;

b = h.getPositionStyle(a);

e.mixin(b, a.borderRadiusStyle);

c.set(this.domNode, b)

onWindowResize: function() {

var a, b = {};

window.appInfo.isRunInMobile ? (a = "map" === this.position.relativeTo ? this.map.id : window.jimuConfig.layoutId, a = f.getMarginBox(a), b.left = 0, b.top = 0, b.width = a.w, b.height = a.h, b.zIndex = this.position.zIndex) : (b = e.clone(this.position), "minimized" === this.windowState && (b.height = this.titleHeight));

b = h.getPositionStyle(b);

b.position = "absolute";

"auto" === b.zIndex && (b.zIndex = 0);

c.set(this.domNode, b);

this._onResponsible()

setPosition: function(a, b) {

var d, g, k;

b || (b = "map" === a.relativeTo ? this.map.id : window.jimuConfig.layoutId);

d = f.getMarginBox(b);

k = Math.floor(d.w / (a.width + a.margin));

g = Math.floor(a.index / k);

a.left = (g + 1) * a.margin + a.index % k * (a.width + a.margin);

a.top -= a.margin * g;

this.position = e.clone(a);

window.appInfo.isRunInMobile && (a.left = 0, a.top = 0, a.width = d.w, a.height = d.h);

d = h.getPositionStyle(a);

d.position = "absolute";

"auto" === d.zIndex && (d.zIndex =

0);

p.place(this.domNode, b);

c.set(this.domNode, d);

this._onResponsible()

RobertScheitlin__GISP

Leo,

You are correct, the config.json will not help in this case as the widgets position is calculated in the code at runtime and is not stored in the config.json.

LeoLadefian4

Thanks, I was looking under the config.json for the widget layerlist. wrong spot i suppose.

YueWu1

Hi Leo,

You can use any modern browser developer debugging tool to find the specific .css setting for this layerlist theme in the application.

Open the file under your project name: something may like this path:

/wwwroot/arcgis-web-appbuilder-1.2/apps/5/theme/LaunchpadTheme/stylee/default/css/jimu-theme.css

Under

/* css for jimu-panel- */
.jimu-on-screen-widget-panel,
.jimu-panel {

you need to change by adding this lines:

margin-top: 270px;

Also, please take a look about this documentation to get familiar about the architecture of the Web App Builder

Development overview—Web AppBuilder for ArcGIS (Developer Edition) | ArcGIS for Developers

Hope this helps

RobertScheitlin__GISP

Leo,

There is no configuration for this so you have to edit the

[install dir]server\apps\[ap number]\themes\LaunchpadTheme\panels\LaunchpadPanel\Panel.js

When you open this file find this function:

setPosition: function(position){
      var style, box, row, col, size;

      box = this._getLayoutBox();
      size = Math.floor(box.w / (position.width + position.margin));

      row = Math.floor(position.index / size);
      col = position.index % size;
      position.left = (row + 1) * position.margin + col * (position.width + position.margin);
      position.top -= position.margin * row;
      position.left += 50;

      this.position = lang.clone(position);

      if(window.appInfo.isRunInMobile){
        position.left = 0;
        position.top = box.h / 2;
        position.width = box.w;
        position.height = box.h / 2;
      }

      style = utils.getPositionStyle(position);
      style.position = 'absolute';

      domConstruct.place(this.domNode, jimuConfig.mapId);
      domStyle.set(this.domNode, style);

      this._onResponsible();
    },

and add line 11 above

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.