jimu-widget-frame.jimu-container and remaining space of custom views in Widget

[diaconori]

Hi there!

We are currently migrating a lot of widgets from our older GIS-platform onto ArcGIS Enterprise, where we are building the new widgets from scratch in Web AppBuilder using ArcGIS JS API 3. 

In that context, I want to know how to make use of the remaining space of the jimu-widget-frame.jimu-container view element. It holds a 398x373 in height and width including margin, but I can't seem to reference that or by any chance inherit the properties from my div's parent node. It can't even be detected, as it is injected by somewhere in the system... Is there any way to take up the remaining height of the injected jimu-container div? Many of our users use iPad, but we also have a lot who use desktop monitors that are 24" or 27", so responsive design is very important to add in these new widgets.

So far I've managed to make a layout that looks like this:

But the intention is to make my view's top level div take the remaining height space from its injected div, the jimu conatiner:

I've tried to do it with CSS-flexbox (even CSS-grid) as they recommend to use in their Web AppBuilder event videos (Web AppBuilder for ArcGIS: Developing for Mobile - YouTube) but I haven't found a working solution yet. My code is this: 

CSS:

.dad-sms-alert .smsLayout {
    display: flex;
    flex-direction: column;
}

.dad-sms-alert .smsLayoutItem {
    margin-top: 10px;
    margin-bottom: 10px;
}

.smsLayout .smsLayoutBody {
    flex: 1;
}

HTML:

<div class="smsLayout">
    <h1 id="selectUtilityTypePrimaryTextView" class="boldTextView">Hvilken forsyningsart ønsker du at varsle
        for?</h1>
    <h2 id="selectUtilityTypeSecondaryTextView" class="regularTextView">Vælg venligst forsyningsart</h2>
    <div id="smsLayoutBody" class="smsLayoutItem">
        <form id="utilitiesForm">
            <label class="block"><input type="radio" name="utilities" value="gas" checked>Gas</label>
            <label class="block"><input type="radio" name="utilities" value="vand">Vand</label>
            <label class="block"><input type="radio" name="utilities" value="varme">Varme</label>
            <label class="block"><input type="radio" name="utilities" value="kloak">Kloak</label>
            <label class="block"><input type="radio" name="utilities" value="andet">Andet</label>
        </form>
    </div>
    <button type="button" id="submitSelectionButton" class="submitSelectionButton">Næste</button>
</div>

Hope to get some help here 🙂 thanks!

[Than_HtetAung]

Hi @diaconori ,

You might want to try panelmanager and widget panel resize function.

Below is the sample code snippet.

var pm = PanelManager.getInstance();
        var panelId = this.id + "_panel";
        var currentWidgetPanel = pm.getPanelById(panelId);
        //mainContent       
        var desiredHeight = 700;//or you can have calculated height
        var desiredWidth = 900;//or you can have calculated width

        currentWidgetPanel.resize(
            {
                w:  desiredWidth,
                h:  desiredHeight,
                l:  currentWidgetPanel._positionInfoBox.l,
                t:  currentWidgetPanel._positionInfoBox.t
            }
        );

PanelManager is the "jimu/PanelManager" https://developers.arcgis.com/web-appbuilder/api-reference/panelmanager.htm

You can adjust that panel size on onOpen or startup event.

Best Regards,

Than

[diaconori]

Hi Than and thanks for the reply!

Unfortunately it is not quite what I am looking for. This solution suggests that we resize the widget's height and width based on a set of fixed values, and that would not be as responsive as what would have been, had we used say percentages instead. I am curious to see if web development has any way of making a layout with constraints, similarly to say constraint layouts in native mobile development. 

Best regards,

Diaco

[Than_HtetAung]

Hi Diaco,

I know your point but this widget panel does not obey your css style. It changed its size on widget startup by using that resize method when I cracked that Jimu engine a few years ago. So I just recalculate the content panel size dynamically upon onopen and call that resize function to update it. It does work for me that time. So I admit it is easy solution not quite proper.

Proper way will be that 

1. write your own jimu panel manager

2. write your own custom layout and theme

with that way you can control your css properly.