topic Re: Center a Widget (Placeholder) in ArcGIS Web AppBuilder Questions

Center a Widget (Placeholder)

KarenRobine — Thu, 23 Feb 2017 23:29:05 GMT

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?

Re: Center a Widget (Placeholder)

RickeyFight — Thu, 23 Feb 2017 23:33:23 GMT

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

Re: Center a Widget (Placeholder)

KarenRobine — Fri, 24 Feb 2017 00:02:27 GMT

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.

Re: Center a Widget (Placeholder)

RobertScheitlin__GISP — Mon, 27 Feb 2017 15:22:13 GMT

Karen,

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

Re: Center a Widget (Placeholder)

KarenRobine — Mon, 27 Feb 2017 23:13:10 GMT

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?

Re: Center a Widget (Placeholder)

RobertScheitlin__GISP — Tue, 28 Feb 2017 17:27:55 GMT

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.

Re: Center a Widget (Placeholder)

KarenRobine — Fri, 10 Mar 2017 15:52:23 GMT

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