Tab Theme Side Controller

1847
18
Jump to solution
09-20-2017 05:59 PM
BrandonPrice
Occasional Contributor

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

18 Replies
RobertScheitlin__GISP
MVP Emeritus

Brandon,

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

BrandonPrice
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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;
      },
BrandonPrice
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

BrandonPrice
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.

BrandonPrice
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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