topic Re: Widget Panel size on Mobile in Web AppBuilder Custom Widgets Questions

Widget Panel size on Mobile

BrandonPrice — Fri, 13 Oct 2017 16:47:19 GMT

Hello,

I am using a tabbed theme. I would like to reduce the panel size of my bookmark widget which I put in one of the onscreen widget placeholders if possible. I was able to do this on the pc through config.json using height and width, but not yet on a mobile device. Primarily the height if possible would be good. Any suggestions?

Thanks,

Brandon

https://community.esri.com/groups/web-appbuilder-custom-themes?sr=search&searchId=886bfd4e-3db3-4927-ad2e-82310724241e&searchIndex=1‌

https://community.esri.com/community/gis/web-gis/web-appbuilder?sr=search&searchId=886bfd4e-3db3-4927-ad2e-82310724241e&searchIndex=2‌

Re: Widget Panel size on Mobile

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:01:21 GMT

Brandon,

To do that you need to make some code changes in the jimu/PanelManager.js getPositionOnMobile function (lines 12-14):

    getPositionOnMobile: function(panel){
      //the position is minimized as title, half widget/height, full screen
      if(typeof panel === 'string'){
        panel = this.getPanelById(panel);
        if(!panel){
          return {};
        }
      }

      var box = html.getMarginBox(window.jimuConfig.layoutId);
      var titleTop = box.h / 2;
      if(panel.label === "Bookmark"){
        titleTop = titleTop + 50;
      }
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Widget Panel size on Mobile

BrandonPrice — Tue, 17 Oct 2017 16:16:26 GMT

Hey Robert,

Thanks for the suggestion. I couldn't get that to go. My code looks like this:

var box = html.getMarginBox(window.jimuConfig.layoutId);
var titleTop = box.h / 2;
if(panel.label === "Bookmark"){
titleTop = titleTop + 50;
}

if(!panel.titleHeight){

panel.titleHeight = 35;

}

Image:

The box for the widget expanded to take up the entire screen.

What about not having it openatstart on mobile and only on phone as another solution?

-Brandon

Re: Widget Panel size on Mobile

RobertScheitlin__GISP — Tue, 17 Oct 2017 17:58:01 GMT

Brandon,

OK, I am not following... With my code change this is what I am seeing:

Left is the bookmark widget which compared to the right directions widget which is standard height.

Re: Widget Panel size on Mobile

BrandonPrice — Tue, 17 Oct 2017 18:54:36 GMT

I relabeled my bookmark widget from "Bookmark" to "Zoom to Hotspot" and that's what the problem was. Thanks Robert. Last thing about using the bookmark widget on a mobile, can the widget appear above the sidebar controller? The default is underneath. Maybe a css z value added to a class or something?

Re: Widget Panel size on Mobile

RobertScheitlin__GISP — Sun, 12 Dec 2021 11:01:24 GMT

Brandon,

See if this helps. In the main confid.json find the bookmark widget and add zIndex to the position property (line 8):

      {
        "position": {
          "left": 95,
          "top": 45,
          "width": 380,
          "height": 410,
          "relativeTo": "map",
          "zIndex": 202
        },
        "placeholderIndex": 1,
        "id": "_47",
        "closeable": true,
        "uri": "widgets/Bookmark/Widget",
        "version": "2.5",
        "name": "Bookmark",
        "config": "configs/Bookmark/config_Bookmark.json",
        "openAtStart": true
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Widget Panel size on Mobile

BrandonPrice — Tue, 17 Oct 2017 22:20:37 GMT

Hi Robert,

This works too. Thanks. This is great. I adjusted the index level from 202 to 102 because it was showing on top of the splash pages.

-Brandon

Re: Widget Panel size on Mobile

DavidTreering2 — Tue, 13 Feb 2018 17:38:46 GMT

I found that getPositionOnMobile in jimu.js/PanelManager.js does not work in the Launch Pad Theme, but found it very useful in the Foldable Theme. Is this a known issue?

Re: Widget Panel size on Mobile

BrandonPrice — Tue, 13 Feb 2018 17:41:30 GMT

Hi Dave,

I have only used getPositionOnMobile for the tabbed. Does anyone else know?

Brandon