Center a Widget (Placeholder)

1315
6
Jump to solution
02-23-2017 03:29 PM
KarenRobine
Occasional Contributor II

I'm trying to force my 'placeholder' type of widget to be centered on the map when it opens.  There's some documentation out there for creating a new panel (https://developers.arcgis.com/web-appbuilder/sample-code/create-a-new-panel.htm). It that the only way to get my widget centered? 

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Karen,

  The OnScreenWidgetPanel.js _normalizePositionObj function controls the opening position of the widgets panel. So you can make mods to the code there to center your widget.

View solution in original post

6 Replies
RickeyFight
MVP Regular Contributor

I would look at the CSS of the Splash widget—Web AppBuilder for ArcGIS | ArcGIS 

0 Kudos
KarenRobine
Occasional Contributor II

Nice idea but the splash screen is essentially a modal dialog.  So you can't interact with the map. I want mine to be able to interact with the map. And also, have a close button like the placeholder widget. Thanks for the idea though.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Karen,

   So are you wanting to center the on screen widget panel that appears after you click a on screen widget icon button?

0 Kudos
KarenRobine
Occasional Contributor II

No. I have the widget appear at startup, and I want it to be placed in the center of the screen (well, actually about 45 pixels from the top but in the center (left and right). I think if the user moves it though, then, next time it opens, it would work as is. Make sense?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Karen,

  The OnScreenWidgetPanel.js _normalizePositionObj function controls the opening position of the widgets panel. So you can make mods to the code there to center your widget.

KarenRobine
Occasional Contributor II

Perfect. Here's the code I ended up writing. I called this at startup if a config parameter was set.

_normalizePositionObjCenter: function(position) {

   var layoutBox = this._getLayoutBox();

   if (this.domNode && this.domNode.clientWidth) {

      position.left = Math.round((layoutBox.w / 2) - (this.domNode.clientWidth / 2));

      position.top = -40;

   } else {

      position.left = isFinite(position.left) ? position.left : layoutBox.w - position.right;

      position.top = isFinite(position.top) ? position.top : layoutBox.h - position.bottom;

   }

   delete position.right;

   delete position.bottom;

   this.position = lang.mixin(lang.clone(this.position), position);

},

0 Kudos