Community

Resizing Widget Window

635
4
12-02-2019 04:02 PM
by Anonymous User
Not applicable
‎12-02-2019 04:02 PM

I'm looking to change the size of widget window/panel for an in-panel widget using WAB v2.4 to have a width of ~50% of the window or ~600px. I've been able to modify the contents of the widget panel (child elements are reduced using method shown in #3) but I'm looking to actually widen a specific widget UI so that it's capable of providing enough horizontal screen real estate for the widget contents.

I've attempted to modify the width property through a variety of methods (These include......

Modifying the config file to include the position object (position.width) and then programmatically enforcing a new width property.

if(this.config.position){
   if(this.position.width){
      this.panel.position.width = this.config.position.width;
      console.log('changed');
   }
}

2. Changing the widget style width via this.domNode.style.width = 600 didn't yield anything as well.

3. Enforcing the widget class (declared as the baseClass at widget instantiation) in the widget stylesheet.

.jimu-widget-taskmanager{ 
    width: 50% !important;
}

Any guidance on how to accomplish this? I'm sure I'm sure accessing the DOM/widget the wrong way but I'm getting frustrated with this simple task.  

0 Kudos
4 Replies
RobertScheitlin__GISP
by MVP Emeritus
MVP Emeritus
‎12-03-2019 08:56 AM

Tom,

   It appears from the screenshots that you are attempting to resize a Foldable Panel in the foldable theme. What you want to do is provide a width property to the panel in the apps main config.json file (line 10 was added and a comma added to line 9).

  "widgetPool": {
    "panel": {
      "uri": "themes/FoldableTheme/panels/FoldablePanel/Panel",
      "position": {
        "top": 5,
        "right": 5,
        "bottom": 5,
        "zIndex": 5,
        "relativeTo": "map",
        "width": 600
      }
    },‍‍‍‍‍‍‍‍‍‍‍‍
0 Kudos
by Anonymous User
Not applicable
‎12-03-2019 03:26 PM

Thanks Robert. In my case this widget is found within the widget pool object (widgetPool.widgets} and modifying the position property here yields no changes. Assuming that may alter this behavior? URIs with the themes/FoldableTheme route are found within widgetPool.panel (which I tried adding the position.width attribute as well with no success even to apply the new width across all in-panel widgets). Thanks again for your help! Any idea on why this may be?

0 Kudos
by Anonymous User
Not applicable
‎12-04-2019 07:27 AM

I feel like most methods I try see to be property-based, where i can access them but changing the values does nothing. The only way I've been able to change this is via Google Dev tools where I'm able to identify the root element and change the width property there, which in fact does modify the DOM. Based on the image in the first photo, there is no valid id that i can access purely in css, so I've tried to access that via DOJO (registry, domById), but have not had any success. 

0 Kudos
by Anonymous User
Not applicable
‎12-04-2019 08:27 AM

Not proud of this but it is somewhat functional. There is something within the loadData lifecycle method which calls out to a specific stylesheet or js method that resets the widget window back to 360px. I've rigged up the widget to override that with a new width, it basically results in the default width flashing and then resizing. Obviously I would like to solve this prior to the dom creation/any rendering but I'm still at a loss on why I can't do that. Any assistance for a more elegant solution would be much appreciated. 

0 Kudos