666493fab9
## Description - The dimension observer in auto layout was not triggering in the viewer due to the fact that the observed container did not adapt to the child contents. - This worked in the editor because the document was not in the default `position:auto` flow. - The fix was to change the `position` property to `auto` and make sure that the observed container has the height which `fit-content`. Reference: https://www.joshwcomeau.com/css/understanding-layout-algorithms/ #### PR fixes following issue(s) Fixes #28556 #### Media #### Type of change - Bug fix (non-breaking change which fixes an issue) ## Testing #### How Has This Been Tested? - [x] Manual - [ ] JUnit - [ ] Jest - [x] Cypress ## Checklist: #### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [x] I have commented my code, particularly in hard-to-understand areas - [NA] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag #### QA activity: - [ ] [Speedbreak features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-) have been covered - [ ] Test plan covers all impacted features and [areas of interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-) - [ ] Test plan has been peer reviewed by project stakeholders and other QA members - [ ] Manually tested functionality on DP - [ ] We had an implementation alignment call with stakeholders post QA Round 2 - [ ] Cypress test cases have been added and approved by SDET/manual QA - [ ] Added `Test Plan Approved` label after Cypress tests were reviewed - [ ] Added `Test Plan Approved` label after JUnit tests were reviewed --------- Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
237 lines
6.5 KiB
JSON
237 lines
6.5 KiB
JSON
{
|
|
"dsl": {
|
|
"widgetName": "MainContainer",
|
|
"backgroundColor": "none",
|
|
"rightColumn": 4896,
|
|
"snapColumns": 64,
|
|
"detachFromLayout": true,
|
|
"widgetId": "0",
|
|
"topRow": 0,
|
|
"bottomRow": 380,
|
|
"containerStyle": "none",
|
|
"snapRows": 124,
|
|
"parentRowSpace": 1,
|
|
"type": "CANVAS_WIDGET",
|
|
"canExtend": true,
|
|
"version": 87,
|
|
"minHeight": 1292,
|
|
"useAutoLayout": true,
|
|
"dynamicTriggerPathList": [],
|
|
"parentColumnSpace": 1,
|
|
"responsiveBehavior": "fill",
|
|
"dynamicBindingPathList": [],
|
|
"leftColumn": 0,
|
|
"children": [
|
|
{
|
|
"boxShadow": "none",
|
|
"widthInPercentage": 0.996039603960396,
|
|
"iconSVG": "/static/media/icon.f2c34197dbcf03595098986de898928f.svg",
|
|
"topRow": 0,
|
|
"labelWidth": 5,
|
|
"type": "INPUT_WIDGET_V2",
|
|
"animateLoading": true,
|
|
"resetOnSubmit": true,
|
|
"leftColumn": 0,
|
|
"dynamicBindingPathList": [
|
|
{
|
|
"key": "accentColor"
|
|
},
|
|
{
|
|
"key": "borderRadius"
|
|
}
|
|
],
|
|
"labelStyle": "",
|
|
"inputType": "MULTI_LINE_TEXT",
|
|
"isDisabled": false,
|
|
"flexVerticalAlignment": "end",
|
|
"isRequired": false,
|
|
"dynamicHeight": "AUTO_HEIGHT",
|
|
"accentColor": "{{appsmith.theme.colors.primaryColor}}",
|
|
"showStepArrows": false,
|
|
"isVisible": true,
|
|
"version": 2,
|
|
"tags": ["Suggested", "Inputs"],
|
|
"isLoading": false,
|
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
|
"alignment": "start",
|
|
"mobileBottomRow": 8,
|
|
"widgetName": "Input1",
|
|
"displayName": "Input",
|
|
"searchTags": ["form", "text input", "number", "textarea"],
|
|
"bottomRow": 26,
|
|
"parentRowSpace": 10,
|
|
"autoFocus": false,
|
|
"hideCard": false,
|
|
"mobileRightColumn": 26,
|
|
"parentColumnSpace": 30.875,
|
|
"dynamicTriggerPathList": [],
|
|
"labelPosition": "Top",
|
|
"key": "gwvbbifp2f",
|
|
"labelTextSize": "0.875rem",
|
|
"isDeprecated": false,
|
|
"rightColumn": 64,
|
|
"widgetId": "l3bftwokl4",
|
|
"minWidth": 450,
|
|
"label": "Label",
|
|
"parentId": "0",
|
|
"labelAlignment": "left",
|
|
"renderMode": "CANVAS",
|
|
"mobileTopRow": 1,
|
|
"responsiveBehavior": "fill",
|
|
"mobileLeftColumn": 6,
|
|
"maxDynamicHeight": 9000,
|
|
"shouldAllowAutofill": false,
|
|
"iconAlign": "left",
|
|
"defaultText": "",
|
|
"minDynamicHeight": 4
|
|
},
|
|
{
|
|
"resetFormOnClick": false,
|
|
"boxShadow": "none",
|
|
"mobileBottomRow": 32,
|
|
"widgetName": "Button1",
|
|
"onClick": "{{Text1.setText(Input1.text)}}",
|
|
"buttonColor": "{{appsmith.theme.colors.primaryColor}}",
|
|
"dynamicPropertyPathList": [
|
|
{
|
|
"key": "onClick"
|
|
}
|
|
],
|
|
"displayName": "Button",
|
|
"iconSVG": "/static/media/icon.05d209fafeb13a8569e3b4e97069d9ee.svg",
|
|
"searchTags": ["click", "submit"],
|
|
"topRow": 27.2,
|
|
"bottomRow": 31.2,
|
|
"parentRowSpace": 10,
|
|
"type": "BUTTON_WIDGET",
|
|
"hideCard": false,
|
|
"mobileRightColumn": 6.453,
|
|
"animateLoading": true,
|
|
"parentColumnSpace": 31.4375,
|
|
"dynamicTriggerPathList": [
|
|
{
|
|
"key": "onClick"
|
|
}
|
|
],
|
|
"leftColumn": 0,
|
|
"dynamicBindingPathList": [
|
|
{
|
|
"key": "buttonColor"
|
|
},
|
|
{
|
|
"key": "borderRadius"
|
|
}
|
|
],
|
|
"text": "Submit",
|
|
"isDisabled": false,
|
|
"key": "jcr1ecw0rf",
|
|
"isDeprecated": false,
|
|
"rightColumn": 3.817097415506958,
|
|
"isDefaultClickDisabled": true,
|
|
"widgetId": "99a2p7b949",
|
|
"minWidth": 120,
|
|
"isVisible": true,
|
|
"recaptchaType": "V3",
|
|
"version": 1,
|
|
"parentId": "0",
|
|
"tags": ["Buttons"],
|
|
"renderMode": "CANVAS",
|
|
"isLoading": false,
|
|
"mobileTopRow": 28,
|
|
"responsiveBehavior": "hug",
|
|
"disabledWhenInvalid": false,
|
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
|
"mobileLeftColumn": 0,
|
|
"buttonVariant": "PRIMARY",
|
|
"placement": "CENTER",
|
|
"alignment": "start"
|
|
},
|
|
{
|
|
"mobileBottomRow": 37,
|
|
"widgetName": "Text1",
|
|
"displayName": "Text",
|
|
"iconSVG": "/static/media/icon.a47d6d5dbbb718c4dc4b2eb4f218c1b7.svg",
|
|
"searchTags": ["typography", "paragraph", "label"],
|
|
"topRow": 32.4,
|
|
"bottomRow": 36.4,
|
|
"parentRowSpace": 10,
|
|
"type": "TEXT_WIDGET",
|
|
"hideCard": false,
|
|
"mobileRightColumn": 64,
|
|
"animateLoading": true,
|
|
"overflow": "NONE",
|
|
"fontFamily": "{{appsmith.theme.fontFamily.appFont}}",
|
|
"parentColumnSpace": 31.4375,
|
|
"leftColumn": 0,
|
|
"dynamicBindingPathList": [
|
|
{
|
|
"key": "truncateButtonColor"
|
|
},
|
|
{
|
|
"key": "fontFamily"
|
|
},
|
|
{
|
|
"key": "borderRadius"
|
|
},
|
|
{
|
|
"key": "text"
|
|
}
|
|
],
|
|
"shouldTruncate": false,
|
|
"truncateButtonColor": "{{appsmith.theme.colors.primaryColor}}",
|
|
"text": "Hello {{appsmith.user.name || appsmith.user.email}}",
|
|
"key": "bw8cstv669",
|
|
"isDeprecated": false,
|
|
"rightColumn": 64,
|
|
"textAlign": "LEFT",
|
|
"dynamicHeight": "AUTO_HEIGHT",
|
|
"widgetId": "fwuwk8tteq",
|
|
"minWidth": 450,
|
|
"isVisible": true,
|
|
"fontStyle": "BOLD",
|
|
"textColor": "#231F20",
|
|
"version": 1,
|
|
"parentId": "0",
|
|
"tags": ["Suggested", "Content"],
|
|
"renderMode": "CANVAS",
|
|
"isLoading": false,
|
|
"mobileTopRow": 33,
|
|
"responsiveBehavior": "fill",
|
|
"borderRadius": "{{appsmith.theme.borderRadius.appBorderRadius}}",
|
|
"mobileLeftColumn": 0,
|
|
"maxDynamicHeight": 9000,
|
|
"fontSize": "1rem",
|
|
"alignment": "start",
|
|
"minDynamicHeight": 4
|
|
}
|
|
],
|
|
"positioning": "vertical",
|
|
"flexLayers": [
|
|
{
|
|
"children": [
|
|
{
|
|
"id": "l3bftwokl4",
|
|
"align": "start"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"id": "99a2p7b949",
|
|
"align": "start"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"children": [
|
|
{
|
|
"id": "fwuwk8tteq",
|
|
"align": "start"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
}
|