mobile friendly custom widget config

Question

I'm trying to make a widget's config different for when the site is opened on a phone. I'm trying to do this within the apps main config.json file, but it's not taking my changes. I added the following lines to the bottom of the mobileLayout array.

{
 "uri": "widgets/FindSchool/Widget",
 "position": {
 "left": 0,
 "top": 30,
 "right": 50,
 "relativeTo": "map"
 },
 "version": "2.3"
 }

rscheitlin · Answer

Scott,

Your config file tells you that it is using the themes\LaunchpadTheme\panels\LaunchpadPanel\Panel.js

scottmiller10 · Answer

I want to make the widget open on 50% width and hug the left side of the screen, but I don't know what panel it's in. { "theme": { "name": "LaunchpadTheme", "styles": [ "default", "style2", "style3" ], "version": "2.3" }, "portalUrl": "http://udel.maps.arcgis.com", "appId": "", "authorizedCrossOriginDomains": [], "title": "Attendance Zone Site", "subtitle": "

Red Clay S.D.

", "keepAppState": true, "logo": "images/new.png", "geometryService": "http://utility.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer", "links": [ { "label": "Help", "url": "https://cadsrgis2.org/hurricane/help.pdf" } ], "widgetOnScreen": { "widgets": [ { "uri": "themes/LaunchpadTheme/widgets/AnchorBarController/Widget", "position": { "bottom": 10, "height": 40, "relativeTo": "map", "zIndex": 0 }, "version": "2.3", "id": "themes_LaunchpadTheme_widgets_AnchorBarController_Widget_19", "name": "AnchorBarController", "icon": "/webappbuilder/apps/25/themes/LaunchpadTheme/widgets/AnchorBarController/images/icon.png?wab_dv=2.4" }, { "uri": "themes/LaunchpadTheme/widgets/Header/Widget", "position": { "left": 15, "top": 17, "width": 670, "height": 46, "relativeTo": "map" }, "version": "2.3", "id": "themes_LaunchpadTheme_widgets_Header_Widget_20", "name": "Header", "icon": "/webappbuilder/apps/25/themes/LaunchpadTheme/widgets/Header/images/icon.png?wab_dv=2.4", "config": null }, { "uri": "widgets/Search/Widget", "position": { "left": 350, "top": 25, "width": 300, "zIndex": 1, "relativeTo": "map" }, "version": "2.3", "id": "widgets_Search_Widget_21", "name": "Search", "icon": "/webappbuilder/apps/25/widgets/Search/images/icon.png?wab_dv=2.4", "config": "configs/Search/config_Search.json" }, { "uri": "widgets/OverviewMap/Widget", "position": { "right": 20, "top": 20, "relativeTo": "map" }, "version": "2.3", "id": "widgets_OverviewMap_Widget_22", "name": "OverviewMap", "icon": "/webappbuilder/apps/25/widgets/OverviewMap/images/icon.png?wab_dv=2.4" }, { "uri": "widgets/ZoomSlider/Widget", "position": { "left": 25, "top": 95, "relativeTo": "map" }, "version": "2.3", "id": "widgets_ZoomSlider_Widget_23", "name": "ZoomSlider", "icon": "/webappbuilder/apps/25/widgets/ZoomSlider/images/icon.png?wab_dv=2.4" }, { "uri": "widgets/HomeButton/Widget", "position": { "left": 25, "top": 175, "relativeTo": "map" }, "id": "widgets_HomeButton_Widget_24", "name": "HomeButton", "version": "2.3", "icon": "/webappbuilder/apps/25/widgets/HomeButton/images/icon.png?wab_dv=2.4" }, { "uri": "widgets/MyLocation/Widget", "position": { "left": 25, "top": 215, "relativeTo": "map" }, "version": "2.3", "id": "widgets_MyLocation_Widget_25", "name": "MyLocation", "icon": "/webappbuilder/apps/25/widgets/MyLocation/images/icon.png?wab_dv=2.4" }, { "uri": "widgets/AttributeTable/Widget", "version": "2.3", "position": { "right": 20, "bottom": 80, "relativeTo": "map" }, "closeable": true, "id": "widgets_AttributeTable_Widget_26", "name": "AttributeTable", "featureActions": [ { "name": "ShowRelatedRecords", "uri": "actions/ShowRelatedRecordsFeatureAction" }, { "name": "ViewInTable", "uri": "actions/ViewInAttributeTableFeatureAction" } ], "icon": "/webappbuilder/apps/25/widgets/AttributeTable/images/icon.png?wab_dv=2.4" }, { "uri": "widgets/Coordinate/Widget", "position": { "left": 20, "bottom": 60, "relativeTo": "map" }, "id": "widgets_Coordinate_Widget_27", "name": "Coordinate", "version": "2.3", "icon": "/webappbuilder/apps/25/widgets/Coordinate/images/icon.png?wab_dv=2.4" }, { "uri": "widgets/Scalebar/Widget", "position": { "left": 27, "bottom": 25, "relativeTo": "map" }, "version": "2.3", "id": "widgets_Scalebar_Widget_28", "name": "Scalebar", "icon": "/webappbuilder/apps/25/widgets/Scalebar/images/icon.png?wab_dv=2.4" }, { "uri": "widgets/Splash/Widget", "position": { "relativeTo": "browser" }, "version": "2.3", "id": "widgets_Splash_Widget_29", "name": "Splash", "icon": "/webappbuilder/apps/25/widgets/Splash/images/icon.png?wab_dv=2.4", "config": "configs/Splash/config_Splash.json" }, { "position": { "right": 100, "top": 20, "relativeTo": "map" }, "placeholderIndex": 1, "id": "_30", "version": "2.3", "closeable": true, "uri": "" }, { "position": { "right": 150, "top": 20, "relativeTo": "map" }, "placeholderIndex": 2, "id": "_31" }, { "position": { "right": 200, "top": 20, "relativeTo": "map" }, "placeholderIndex": 3, "id": "_32" }, { "uri": "widgets/ExtentNavigate/Widget", "visible": false, "position": { "top": 255, "left": 25, "relativeTo": "map" }, "version": "2.3", "id": "widgets_ExtentNavigate_Widget_33", "name": "ExtentNavigate", "icon": "/webappbuilder/apps/25/widgets/ExtentNavigate/images/icon.png?wab_dv=2.4" } ], "panel": { "uri": "jimu/OnScreenWidgetPanel", "position": { "relativeTo": "map" } } }, "map": { "3D": false, "2D": true, "position": { "left": 0, "top": 0, "right": 0, "bottom": 0 }, "itemId": "acb43de4039a4b70ba1d02ce9e29293e", "mapOptions": {}, "id": "map", "portalUrl": "http://udel.maps.arcgis.com" }, "widgetPool": { "panel": { "uri": "themes/LaunchpadTheme/panels/LaunchpadPanel/Panel", "position": { "relativeTo": "map" } }, "widgets": [ { "name": "FindSchool", "uri": "widgets/FindSchool/Widget", "config": "configs/FindSchool/config_FindSchool.json", "index": 2, "openAtStart": true, "id": "widgets_FindSchool_Widget_47", "version": "2.3" } ], "groups": [] }, "mobileLayout": { "widgetOnScreen": { "widgets": [ { "uri": "themes/LaunchpadTheme/widgets/AnchorBarController/Widget", "position": { "bottom": 0, "height": 40, "width": "100%", "zIndex": 0, "relativeTo": "map" }, "version": "2.3" }, { "uri": "themes/LaunchpadTheme/widgets/Header/Widget", "position": { "left": 0, "right": 0, "top": 0, "height": 46, "relativeTo": "map" }, "version": "2.3" }, { "uri": "widgets/Search/Widget", "position": { "left": 10, "top": 10, "right": 10, "zIndex": 0, "relativeTo": "map" }, "version": "2.3" }, { "uri": "widgets/OverviewMap/Widget", "position": { "right": 20, "top": 20 }, "version": "2.3" }, { "uri": "widgets/ZoomSlider/Widget", "position": { "right": 10, "bottom": 160, "relativeTo": "map" }, "version": "2.3" }, { "uri": "widgets/HomeButton/Widget", "position": { "right": 10, "bottom": 75, "relativeTo": "map" } }, { "uri": "widgets/MyLocation/Widget", "inPanel": false, "position": { "right": 10, "bottom": 115, "relativeTo": "map" }, "version": "2.3" }, { "uri": "widgets/AttributeTable/Widget", "version": "2.3", "position": { "left": 10, "bottom": 70, "relativeTo": "map" }, "closeable": true }, { "uri": "widgets/Coordinate/Widget", "position": { "left": 20, "bottom": 60 } }, { "uri": "widgets/Scalebar/Widget", "position": { "left": 50, "bottom": 70, "relativeTo": "map" }, "version": "2.3" }, { "uri": "widgets/Splash/Widget", "visible": false, "position": { "relativeTo": "browser" }, "version": "2.3" }, { "position": { "left": 10, "bottom": 195, "relativeTo": "map" } }, { "position": { "left": 10, "bottom": 155, "relativeTo": "map" } }, { "position": { "left": 10, "bottom": 115, "relativeTo": "map" } }, { "uri": "widgets/ExtentNavigate/Widget", "visible": false, "position": { "right": 10, "bottom": 238, "relativeTo": "map" }, "version": "2.3" } ] }, "map": { "position": { "left": 0, "top": 0, "right": 0, "bottom": 0 } }, "widgetPool": { "panel": { "uri": "themes/LaunchpadTheme/panels/LaunchpadPanel/Panel", "position": { "top": 30, "width": "50%", "relativeTo": "map" } } } }, "loadingPage": { "backgroundColor": "#508dca", "backgroundImage": { "visible": false }, "loadingGif": { "visible": true, "uri": "/webappbuilder/apps/36/configs/loading/images/predefined_loading_1.gif", "width": 58, "height": 29 } }, "wabVersion": "2.3", "isTemplateApp": true, "isWebTier": false, "httpProxy": { "useProxy": true, "alwaysUseProxy": false, "url": "", "rules": [] } }

rscheitlin · Answer

Scott,

A widgets position in mobile is ultimately controlled by the panel that the widget resides in. So changing the left and right property will not make a difference if the widgets panel is making the widget panel 100% width.