Widget Panel size on Mobile

[BrandonPrice]

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...‌

https://community.esri.com/community/gis/web-gis/web-appbuilder?sr=search&searchId=886bfd4e-3db3-492...‌

[RobertScheitlin__GISP · Accepted solution]

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;
      }
...‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[BrandonPrice]

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

[RobertScheitlin__GISP]

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.

[BrandonPrice]

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?

[RobertScheitlin__GISP]

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
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[BrandonPrice]

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

[DavidTreering2]

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?

[BrandonPrice]

Hi Dave,

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

Brandon