Forms in layouts become shrunk

[SimonF]

Hi there,
We have a simple 2 column layout spread to 100%.
In the left colum there is a additional layout with also width of 100%. In there are two forms (blue and green in the screenshot below, also with maximum width).
On the right side, there is a HtmlPane with text in it.

If you are above a specific browser-size everything looks fine.

If I'm resizing the browser you can see in the screenshot the blue form/formitems have a specific width set, so the width of the left layout cannot decrease anymore. If you decrease the width of the browser window, the green form gets even smaller and smaller. also the right layout gets smaller.


Is there an option that the green form does not get smaller, if some other component in the layout blocks the resize of the layout? Like shown in the image below marked with (1)


This is reproducible in all common browsers and the latest nightly.

Canvas.resizeControls(4);
Canvas.resizeFonts(2);

isc.HLayout.create({
    "ID": "rootHLayout_33",
    height: "100%",
    width: "100%",
    border: "1px solid red",
    "autoDraw": true,
    "hideUsingDisplayNone": false,
    "hoverWidth": 200,
    "leaveScrollbarGap": false,
    "members": [
        isc.VLayout.create({
            "ID": "rootLayout_33",
            "width": "100%",
            "height": "100%",
            "border": "1px dashed green",
            "hideUsingDisplayNone": false,
            "hoverWidth": 200,
            "leaveScrollbarGap": false,
            "members": [
                isc.DynamicForm.create({
                    "cellBorder": true,
                    "backgroundColor": "#b2d8f1 !important",
                    "ID": "theForm1",
                    "width": "100%",
                    "hideUsingDisplayNone": false,
                    "hoverWidth": 200,
                    "numCols": 5,
                    "autoFocus": false,
                    "selectOnFocus": true,
                    "colWidths":
                    [100, 250, 100, 200],
                    "itemHoverDelay": 1200,
                    "wrapItemTitles": false,
                    "readOnlyDisplay": "static",
                    "fields":
                    [{
                            "ID": "theLabel11",
                            "name": "theLabel11",
                            "title": "Label 1.1",
                            "type": "select",
                            "width": "*",
                            "valueMap": {
                                "2": "SelectValue 2",
                                "1": "SelectValue 1"
                            }
                        }, {
                            "ID": "theLabel12",
                            "name": "theLabel12",
                            "title": "Label 1.2",
                            "type": "text",
                            "colSpan": 2,
                            "width": "*"
                        }, {
                            "ID": "theLabel13",
                            "name": "theLabel13",
                            "title": "Label 1.3",
                            "type": "text",
                            "width": "*"
                        }, {
                            "ID": "theLabel14",
                            "name": "theLabel14",
                            "title": "Label 1.4",
                            "type": "text",
                            "colSpan": 2,
                            "width": "*"
                        }, {
                            "ID": "theLabel15",
                            "name": "theLabel15",
                            "title": "Label 1.5",
                            "type": "select",
                            "width": "*",
                            "valueMap": {
                                "2": "SelectValue 2",
                                "3": "SelectValue 3",
                                "1": "SelectValue 1"
                            }
                        }, {
                            "ID": "theLabel16",
                            "name": "theLabel16",
                            "title": "Label 1.6",
                            "type": "date",
                            "width": "110",
                            "textAlign": "left",
                            "readOnlyDisplay": "static",                            
                            "useTextField": true,
                            "showChooserWeekPicker": true,
                            "startDate": new Date(2000, 0, 1),
                            "endDate": new Date(2000, 0, 1)
                        }, {
                            "ID": "theStaticField",
                            "name": "theStaticField",
                            "type": "staticText",                            
                            "width": "*",
                            "showTitle": false                            
                        }, {
                            "ID": "theLabel17",
                            "name": "theLabel17",
                            "title": "Label 1.7",
                            "type": "text"
                        }, {
                            "ID": "theLabel18",
                            "name": "theLabel18",
                            "title": "Label 1.8",
                            "type": "text",
                            "colSpan": 2,
                            "hint": "<a href=\"tel:00000\"><img src=\"https://cdn2.iconfinder.com/data/icons/font-awesome/1792/phone-16.png\"><\/a>",
                            "width": "*",
                            "minHintWidth": 16
                        }
                    ],
                    "values": {
                        "theLabel11": 1,
                        "theLabel12": "Value 1.2",
                        "theLabel13": "Value 1.3",
                        "theLabel14": "Value 1.4",
                        "theLabel15": 2,
                        "theStaticField": "Value 1.5",
                        "theLabel17": "Value 1.7",
                        "theLabel18": "00000",
                    }
                }),
                isc.DynamicForm.create({
                    "cellBorder": true,
                    "backgroundColor": "#d8f1b2 !important",
                    "ID": "theForm2",
                    "width": "100%",
                    "numCols": 3,
                    "fields":
                    [{
                            "ID": "theLabel21",
                            "name": "theLabel21",
                            "title": "Label 2.1",
                            "type": "date",
                            "colSpan": 3,
                            "width": 115,
                            "useTextField": true,
                            "showChooserWeekPicker": true
                        },{
                            "ID": "theLabel22",
                            "name": "theLabel22",
                            "title": "Label 2.2",
                            "type": "text",
                            "width": 80,                            
                            "startRow": true
                        }, {
                            "ID": "theLabel23",
                            "name": "theLabel23",
                            "type": "select",
                            "title": "Label 2.3",
                            "width": 250,
                            "valueMap": {
                                "1": "SelectValue",

                            }
                        }
                    ],
                    "values": {
                        "theLabel23": 1
                    }
                })

            ]
        }),
        isc.HTMLPane.create({
            "ID": "helpPane",
            "width": "100%",
            "height": "100%",
            "contents": "<h3>Text</h3><p>Left and right Layout are both set to width: 100%<br><br><br>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.<\/p>",
            "padding": 4
        })
    ]
})

[SimonF]

Again studying the documentation there is surely a connection between thee *breath* parameters.
But e.g. in https://www.smartclient.com/smartcli...PercentBreadth it's documented to set breadthPolicy to fill (which is a undocumented attribute).
When adding breadthPolicy:"fill" and minBreadthMember: "theForm2" to the rootLayout_33 it seems to work, but this is a very simple example. In reality we have much more forms, and cannot detect which member of the layout will be the widest.
So maybe I have to use https://www.smartclient.com/smartcli...DefaultBreadth, but the usage of it isn't clear from the documentation.

Thanks in advance for any help
Regards

[Blama]

Hi all,

I just tried this out of interest. I see the same behavior SimonF describes (v11.1p_2018-02-15, any online sample and the sample code without Canvas.resizeControls(4); Canvas.resizeFonts(2);), and additionally that the result is different, if you resize from almost FullHD-width to half-wide or do this in very small steps, e.g. 10 resizes of -100px each.

Best regards
Blama

[Isomorphic]

What's happening here is that the containing layout is assigned a smaller size, and assigns its size in turn to its members, and one overflows. By design, this does not cause the sizes of all other members to be revised upwards to match the overflowing member, as this could lead to terrible performance, infinite loops, and ambiguous situations.

You can set layout.minBreadthMember if there is a specific member you expect will overflow and you want other members to match. Beyond that, you can always use resized() events to do more, but because of the previously mentioned issues with performance and with possible infinite loops, we wouldn't recommend attempting to implement something like having all members match the largest.

[SimonF]

Thanks for your response. So basically the result of your post says there is no solution to this problem.
Sure we have the recommendation to use the application only with a minimum width and height, But users can't always choose their equipment and sometimes they just have to work with what their company has bought for them.

Also, many websites can adapt to the browser size (some kind of responsiveness). In our case, this is not possible due to the performance problems you have described. In a large-scalle application its not always possible to know the largest element in a layout. Imho it isn't possible nowadays to restrict the usage to users with a minimum browser width (sure it can be displayed with a warning, but most of the users will ignore them nevertheless) also it looks like there is no solution when not directly referencing the largest member.

Thanks for the hard-to-digest answer.

[Isomorphic]

Wow, that's a very bad distortion.

What we actually said was that there's a declarative approach to handling the most common situation, and you can easily add code to handle other situations, but you should be careful as it's possible to make a mistake in application code and introduce lots of redraws and infinite loops.

We handle this kind of thing all the time and we've never run across a complex layout our components couldn't handle - just think through the cases carefully.