Just wandering if it was possible to locate the Full Screen widget to the widget pool instead of having it appear in the top right corner of the map. I have a panel widget that opens at startup, and it covers the Full Screen widget, so I need to relocate it. I tried placing the widget in the widget pool of the config file, but this isn't working. It just places an icon in the header controller that doesn't do anything. I know I can change the position of the Full Screen widget to another location on the map, but the top right just makes the most sense, so it would be nice the header controller would be the best place.
Solved! Go to Solution.
Franklin,
The full screen widget is not developed to be placed in a widget pool. The best you can do it re-position it to work better with your open panel like:
{
"uri": "widgets/FullScreen/Widget",
"position": {
"right": 368,
"top": 8,
"relativeTo": "map"
},
"version": "2.8",
"id": "widgets_FullScreen_Widget_19",
"name": "FullScreen",
"config": null
}
Another way is to change the above relativeTo property to "screen" and then you have to adjust the widgets.js setPosition function to set the widget z-index. (add line 4):
setPosition: function (/*position*/) {
this.inherited(arguments);
var appConfig = window.getAppConfig();
html.setStyle(this.domNode, 'z-index', 110);
if (appConfig.theme.name === "DashboardTheme" && !window.appInfo.isRunInMobile) {
html.setStyle(this.domNode, 'z-index', 110);
this.placeAt(this._getDBThemeContainer());
}
//hide button in mobile
if (window.appInfo.isRunInMobile || jimuUtils.isMobileUa()) {
html.addClass(this.domNode, 'mobile');
} else {
html.removeClass(this.domNode, 'mobile');
}
},
That will give you something like this:
Franklin,
The full screen widget is not developed to be placed in a widget pool. The best you can do it re-position it to work better with your open panel like:
{
"uri": "widgets/FullScreen/Widget",
"position": {
"right": 368,
"top": 8,
"relativeTo": "map"
},
"version": "2.8",
"id": "widgets_FullScreen_Widget_19",
"name": "FullScreen",
"config": null
}
Another way is to change the above relativeTo property to "screen" and then you have to adjust the widgets.js setPosition function to set the widget z-index. (add line 4):
setPosition: function (/*position*/) {
this.inherited(arguments);
var appConfig = window.getAppConfig();
html.setStyle(this.domNode, 'z-index', 110);
if (appConfig.theme.name === "DashboardTheme" && !window.appInfo.isRunInMobile) {
html.setStyle(this.domNode, 'z-index', 110);
this.placeAt(this._getDBThemeContainer());
}
//hide button in mobile
if (window.appInfo.isRunInMobile || jimuUtils.isMobileUa()) {
html.addClass(this.domNode, 'mobile');
} else {
html.removeClass(this.domNode, 'mobile');
}
},
That will give you something like this:
The second option worked perfectly Robert. Thank you
Franklin. Don't forget to mark this question as answered by clicking on the "Mark Correct" link on the reply that answered your question.