Custom widget height sizing

[JamesCrandall]

WAB Dev 2.19

Lauchpad Theme

Trying to resize an entire custom widget to maximize it's height property.  Already attempted to set position{} properties in the config.json with no affect.  However if I inspect the widget in DevTools and manually adjust the height value to 80% it looks like what I want but unsure how to achieve this:

<div class="jimu-panel jimu-launchpad-panel" id="widgets_Pega WU Tool_Widget_43_panel" widgetid="widgets_Pega WU Tool_Widget_43_panel" style="inset: 120px auto auto 60px; width: 350px; height: 80%; padding: 0px; margin: auto; z-index: 101; position: absolute; opacity: 1;"></div>

I also tried to implement PanelManger in the Widget.js file itself in an onOpen() function but ran into errors.

[BrianLeroux · Accepted solution]

Try reviewing the following thread to see if that helps.

how-to-change-the-width-and-height-of-the-custom 

[JamesCrandall]

Thanks Brian and Robert of course!

That does in fact work to alter the size of the widget.  

Is there any way to specify a percent size instead of just integer value?  Something like instead of 600 can set it so 80%?

panel.setPosition({ top: 120, left: 10, width: 650, height: 600, margin: 10, index: 0 });

This only worked in the startup: function () {} for my widget.  I tried to implement onOpen(){} but it doesn't fire when I close/open the widget.  Full solution:

_resizeWidget: function (widgetName) {
            var wm = WidgetManager.getInstance();
            var pm = PanelManager.getInstance();
            var myWidget = null;
            arrayUtils.some(wm.appConfig.widgetPool.widgets, function (aWidget) {
                if (aWidget.name === widgetName) {
                    myWidget = aWidget;
                }
            });

            if (myWidget) {
                var controller = wm.getWidgetsByName("AnchorBarController");
                var pos = {
                    relativeTo: map,
                    left: 277,
                    top: 225,
                    width: 600,
                    height: 820
                };
                if (controller.length > 0) {
                    pm.showPanel(myWidget).then(lang.hitch(this, function (panel) {
                        //panel.setPosition({ top: 120, left: 10, width: 350, height: 80%, margin: 10, index: 0 });
                        panel.setPosition({ top: 120, left: 10, width: 650, height: 600, margin: 10, index: 0 });
                        pm.normalizePanel(panel);
                    }));
                } else {
                    pm.showPanel(myWidget);
                }
            }
        },

        onOpen: function () {
            this._resizeWidget("Pega WU Tool"); //doesn't ever fire
        },

        startup: function () {
            //resize widget to specs
            this._resizeWidget("Pega WU Tool");
}

[BrianLeroux]

Have you tried putting 80% as the height value?  If that does not work you should be able to calculate the pixel value you want. I would try to take map.height x 0.8 to get 80 % of the map height.

For onOpen, any error in console? I would add a console.log("OnOpen Fired") to make sure you see that event occurring.

[JamesCrandall]

heck of an idea!  Thanks!

var heightVal = this.map.height * 0.80
panel.setPosition({ top: 75, left: 10, width: 350, height: heightVal, margin: 10, index: 0 });

No errors, the onOpen: function(){} just never gets fired at all. I'm sure it has something to do with the Widget Life Cycle but I haven't fully investigated that yet. 

[BrianLeroux]

onOpen fires right after startup completes so you should see it firing pretty quickly once you open the widget. Personally I would try to get your events to fire appropriately just by using console logging. Once that works then you can add back the calling of your resize function.

Also I don't think it matters at all but I like to order the functions based on the timing. for example I keep startup first and then onOpen and finally my custom functions.