Center a Widget (Placeholder)

[KarenRobine]

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? 

[RickeyFight]

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

[KarenRobine]

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.

[RobertScheitlin__GISP]

Karen,

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

[KarenRobine]

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?

[RobertScheitlin__GISP · Accepted solution]

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]

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);

},