topic Re: Tab Theme Side Controller in Web AppBuilder Custom Widgets Questions

Tab Theme Side Controller

BrandonPrice — Thu, 21 Sep 2017 00:59:23 GMT

I want to narrow the width of the side controller for the tab theme if possible when switched to a mobile device. I was trying to play with the theme/widgets/sidecontroller css file and create a media response. Can someone please steer me in the right direction?

Much appreciated

Re: Tab Theme Side Controller

RobertScheitlin__GISP — Thu, 21 Sep 2017 20:09:59 GMT

Brandon,

The width is not in the css it is in the Widget.js of SidebarController. Change the maxWidth property in that file.

Re: Tab Theme Side Controller

BrandonPrice — Thu, 21 Sep 2017 22:37:52 GMT

Thanks Robert. I tried that method already. I could not get it to work on a mobile device. It is actually missing when I adjusted the maxwidth in the widget.js on a cell phone. But it adjusted properly on the desktop screen. I really don’t need to adjust it on a computer because it already has enough space, only for a cell. That is why I was trying the css option.

Re: Tab Theme Side Controller

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:21:35 GMT

Brandon,

CSS media queries will not work in this situation as the widgets code sets the width programmaticly based on the controller state (minimized or maximized). When I tested in the WAB Preview on mobile devices it worked fine for me. If you only want the width adjusted on mobile the you can add some code to check for the WAB specific window.appInfo.isRunInMobile property.

I tested using Chrome developer tools and using mobile emulator and it worked great using this code changes to the sidebarController widget.js (added lines 2 - 6):

      getWidth: function(){
        if (window.appInfo.isRunInMobile) {
          this.maxWidth = 200;
        } else {
          this.maxWidth = 365;
        }
        var box = html.getContentBox(window.jimuConfig.layoutId);
        var w;
        if(box.w * 0.8 > this.maxWidth){
          w = this.maxWidth;
        }else{
          w = box.w * 0.8;
        }
        return w;
      },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Tab Theme Side Controller

BrandonPrice — Fri, 22 Sep 2017 15:12:56 GMT

Hi Robert,

This is excellent. I am surprised that when I changed….

moveTopOnActive: false,

maxWidth: 365,

minWidth: 55,

animTime: 200,

the maxwidth to 285 and the min to 40 in this case, nothing showed up on the cell. Only in the desktop version. When I added your code provided, the mobile adjusted to the settings designated. What method changes both? Just out of curiousity.

Re: Tab Theme Side Controller

RobertScheitlin__GISP — Fri, 22 Sep 2017 15:23:42 GMT

Brandon,

I am not sure what you mean. If I change the maxWidth property to something other than 365 it affects desktop and mobile and the code I provided can adjust the maxWidth for mobile even further.

If your original question is answered then be sure to mark this as answered.

Re: Tab Theme Side Controller

BrandonPrice — Fri, 22 Sep 2017 15:28:32 GMT

What I was trying to say is when I adjusted the maxwidth to something other than 365, the desktop was fine but the mobile went blank. That’s all. I will mark as anwered. Thanks for all the help.

Re: Tab Theme Side Controller

RobertScheitlin__GISP — Fri, 22 Sep 2017 15:56:43 GMT

Brandon,

In my testing I did not adjust the minWidth as there really is no need and it seemed to cause issues for me. You should just leave it as is and only adjust the 365 in my code portion and leave the maxWidth as 365 in the widgets main maxWidth property.

Re: Tab Theme Side Controller

BrandonPrice — Sat, 23 Sep 2017 00:22:30 GMT

Now the layer list layer text is getting scrunched from adjusting the sidebar. I haven't found any remedy yet for this. Is this an easy fix too? I am done after this. Last question I promise. Thanks.

Re: Tab Theme Side Controller

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:21:38 GMT

Brandon,

Well that would be the problem with making it smaller. The one thing I can think of is to adjust the layerlist font size maybe.

In the layerlist widget style.css:

.jimu-widget-layerList .div-content{
  position: relative;
  /*************/
  /*color: #686868;*/
  font-size: 8px; /* was 12px */
  border: 0px solid;
}‍‍‍‍‍‍‍

Re: Tab Theme Side Controller

BrandonPrice — Fri, 29 Sep 2017 01:49:42 GMT

Thanks Robert. This worked nicely. I used a media response so it affected only the app on a mobile platform. Can the sidebar controller on a tabbed theme have the ellipsis (...) button and that drop down menu at the top that turns all layers on/off removed? I saw a post about it for the foldable.

Re: Tab Theme Side Controller

RobertScheitlin__GISP — Fri, 29 Sep 2017 12:46:08 GMT

Brandon,

I am not sure I am following but if you are asking about the LayerList widget and removing the actions menu then the fact that you are using the tab theme has no bearing.

Re: Tab Theme Side Controller

BrandonPrice — Fri, 29 Sep 2017 16:58:36 GMT

Yes. Removing the actions from the layer list widget.

Re: Tab Theme Side Controller

RobertScheitlin__GISP — Fri, 29 Sep 2017 18:30:42 GMT

Brandon,

In the LayerList widget settings if you un-check all the actions then the menu will not show.

I.e. un-check all of these:

Choose which actions will be shown on the layer context menu.

	Zoom to
	Transparency
	Enable / Disable pop-up
	Move up / Move down
	View in Attribute Table
	Description / Show item details / Download

Re: Tab Theme Side Controller

BrandonPrice — Fri, 29 Sep 2017 21:43:37 GMT

Thanks. I will be sure to mark you answer as correct. ☺

Re: Tab Theme Side Controller

BrandonPrice — Sat, 30 Sep 2017 01:05:10 GMT

Thanks Robert. This is good too. However, I was trying to see if a change to the scripts might work too since I have already downloaded the app onto my server. I found this: Remove popup menu from Layer List Widget. Will this still work with 2.5?

Re: Tab Theme Side Controller

RobertScheitlin__GISP — Mon, 02 Oct 2017 12:42:21 GMT

It should

Re: Tab Theme Side Controller

BrandonPrice — Tue, 03 Oct 2017 14:25:23 GMT

Thanks. This was great Robert.

Re: Tab Theme Side Controller

BrandonPrice — Wed, 04 Oct 2017 20:04:49 GMT

I also was able create more text space by setting this to zero:

.jimu-widget-layerList .col3{
width: 0px;
}

-Brandon