Move auto launch widget

1196
10
Jump to solution
06-02-2017 09:13 AM
CCWeedcontrol
Occasional Contributor III

I can't figure out how to move the Legend and ESearch windows down at launch.

Pic one currently show how the ESearch appears at launch, it covers up toggle buttons. Pic two is how i would like it to appear at lunch it doesn't cover up the toggle buttons. What do i need to change to get to Legend and ESarch auto lunch to move down.

0 Kudos
1 Solution

Accepted Solutions
RickeyFight
MVP Regular Contributor

What you need to do is change the top style for that widget

in the style.css found here:

\WebAppBuilderForArcGIS\server\apps\7\themes\LaunchpadTheme\widgets\Header\css

Assuming you are using the launchpad theme and your panel was # 30 

You need to past in:

div#_30_panel {
 top: 150px !important;
}

You can find your panel number by look in the config.json or inspect the element and add a new style rule. 

{
 "position": {
 "right": 100,
 "top": 20,
 "relativeTo": "map"
 },
 "placeholderIndex": 1,
 "id": "_30",
 "name": "Legend",
 "label": "Legend_2",
 "version": "2.3",
 "closeable": true,
 "icon": "/webappbuilder/apps/7/widgets/Legend/images/icon.png?wab_dv=2.4",
 "uri": "widgets/Legend/Widget",
 "config": "configs/Legend/config_Legend_2.json",
 "openAtStart": true
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It should then load at 150px down from the top of the page. If 150 is not enough adjust the number. 

View solution in original post

10 Replies
RickeyFight
MVP Regular Contributor

What theme are you using?

0 Kudos
RickeyFight
MVP Regular Contributor

What you need to do is change the top style for that widget

in the style.css found here:

\WebAppBuilderForArcGIS\server\apps\7\themes\LaunchpadTheme\widgets\Header\css

Assuming you are using the launchpad theme and your panel was # 30 

You need to past in:

div#_30_panel {
 top: 150px !important;
}

You can find your panel number by look in the config.json or inspect the element and add a new style rule. 

{
 "position": {
 "right": 100,
 "top": 20,
 "relativeTo": "map"
 },
 "placeholderIndex": 1,
 "id": "_30",
 "name": "Legend",
 "label": "Legend_2",
 "version": "2.3",
 "closeable": true,
 "icon": "/webappbuilder/apps/7/widgets/Legend/images/icon.png?wab_dv=2.4",
 "uri": "widgets/Legend/Widget",
 "config": "configs/Legend/config_Legend_2.json",
 "openAtStart": true
 }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It should then load at 150px down from the top of the page. If 150 is not enough adjust the number. 

CCWeedcontrol
Occasional Contributor III

That did the trick, thank you!

0 Kudos
CCWeedcontrol
Occasional Contributor III

well it did move it down but now the window only moves in a fixed horizontal way along the screen.

I need to be able to move the window around anywhere.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rickey's way of using !Important in the css will confine the widget to that top postion and make it unmovable up and down. What you really want to do is modify the opening position code in the widget See this thread:

https://community.esri.com/thread/190920-set-the-on-screen-widget-position-programmatically 

CCWeedcontrol
Occasional Contributor III

Robert i add the following and it moved the context of the inside of the ESearch down (see attached).

  startup: function() {
        this.inherited(arguments);

        this._normalizePositionObj(this.position);
        this._makeOriginalBox();
        this.makePositionInfoBox();
        this.makeMoveable(this._positionInfoBox.w, this._positionInfoBox.w * 0.25);
        this.inherited(arguments);
        var position = {
          relativeTo: map,
          left: 277,
          top: 225,
          width: 300,
          height: 420
        };
        this.getPanel().setPosition(position);
      },
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Not sure what all the other code is about but you only need this :

      startup: function(){
        this.inherited(arguments);

        var position = {
          relativeTo: map,
          left: 277,
          top: 225,
          width: 300,
          height: 420
        };
        this.getPanel().setPosition(position);

        this.fetchData();
        this.list.parentWidget = this;
      },‍‍‍‍‍
0 Kudos
CCWeedcontrol
Occasional Contributor III

I replaced what i had previously( not sure what the other code was, i was already there.) with what you posted(lines 8-22) and nothing changed at start up.

postCreate: function() {
        this._originalBox = {
          w: 400,
          h: 410
        };
      },

      startup: function() {
        this.inherited(arguments);

        var position = {
          relativeTo: map,
          left: 277,
          top: 325,
          width: 300,
          height: 420
        };
        this.getPanel().setPosition(position);

        this.fetchData();
        this.list.parentWidget = this;
      },

      _onMaxBtnClicked: function(evt) {
        evt.stopPropagation();
        var posInfo = this._getPositionInfo();
        if (posInfo.isRunInMobile) {
          if (this.windowState === 'maximized') {
            this.panelManager.normalizePanel(this);
          } else {
            this.panelManager.maximizePanel(this);
          }
          this._setMobilePosition();
        }
      },
0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Well I added that code to the eSearch widgets startup and it move the opening position as it should. So I am not sure what you are doing differently.

0 Kudos