eclipsesource / eclipsesource/jsonforms
Controls use different amount of space when hidden
- Dominant language
- TypeScript
- Stars
- 2.7k
- Forks
- 424
- Avg merge
- 17d 8h
- Merged PRs (30d)
- 1
Description
### Describe the bug
In a horizontal layout controls that are not shown still consume space unexpectedly.
### Expected behavior
I expect only controls that are shown will participate in the flex layout and space is not associated with controls that are not shown.
### Steps to reproduce the issue
1. Go to https://stackblitz.com/edit/jsonformsquerybuilder
3. Click on "Add to query groups" to add a query group to the array. Click on "Add to queries" to a query to the sub array.
4. Change "Property Name" to "connectionStatus".
Notice the unexpected reserved space after the connection status value that looks incorrect:
6. Change "Property Name" to "description"
Notice that the spacing between the description and operator field is too large and looks incorrect:
The following are the schemas demonstrated. The issue appears on both the seeds I tested, the current [angular seed](https://github.com/eclipsesource/jsonforms-angular-seed/commit/2a2748a8ff1a361443ea269baf9ce540abb3bfdf) and the [current vue seed](https://github.com/eclipsesource/jsonforms-vue-seed/commit/b1202ab169718af9ced609146f79eae2405e4a82).
schema
{
"definitions": {
"query": {
"type": "object",
"properties": {
"propertyName": {
"type": "string",
"enum": ["connectionStatus", "description"]
}
},
"anyOf": [
{
"if": {
"properties": { "propertyName": { "const": "connectionStatus" } }
},
"then": {
"properties": {
"connectionStatusOperator": {
"type": "string",
"enum": ["equals", "doesNotEqual"]
},
"connectionStatusValue": {
"type": "string",
"enum": ["approved", "disconnected", "connected"]
}
}
}
},
{
"if": {
"properties": { "propertyName": { "const": "description" } }
},
"then": {
"properties": {
"descriptionOperator": {
"type": "string",
"enum": ["equals", "doesNotEqual"]
},
"descriptionValue": { "type": "string" }
}
}
}
]
},
"queryGroup": {
"type": "object",
"properties": {
"queryGroupsOperator": { "type": "string", "enum": ["AND", "OR"] },
"queries": {
"type": "array",
"items": { "$ref": "#/definitions/query" }
}
}
}
},
"type": "object",
"properties": {
"queryGroups": {
"type": "array",
"items": { "$ref": "#/definitions/queryGroup" }
}
}
}
uischema.json
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"label": { "text": "Query Groups", "show": true },
"scope": "#/properties/queryGroups",
"options": {
"showSortButtons": true,
"detail": {
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/queries",
"options": {
"showSortButtons": true,
"detail": {
"type": "HorizontalLayout",
"elements": [
{ "type": "Control", "scope": "#/properties/propertyName" },
{
"type": "Control",
"scope": "#/properties/connectionStatusOperator",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/propertyName",
"schema": { "const": "connectionStatus" }
}
}
},
{
"type": "Control",
"scope": "#/properties/connectionStatusValue",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/propertyName",
"schema": { "const": "connectionStatus" }
}
}
},
{
"type": "Control",
"scope": "#/properties/descriptionOperator",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/propertyName",
"schema": { "const": "description" }
}
}
},
{
"type": "Control",
"scope": "#/properties/descriptionValue",
"rule": {
"effect": "SHOW",
"condition": {
"scope": "#/properties/propertyName",
"schema": { "const": "description" }
}
}
}
]
}
}
},
{ "type": "Control", "scope": "#/properties/queryGroupsOperator" }
]
}
}
}
]
}
### Screenshots
See above
### Which Version of JSON Forms are you using?
v3.3.0
### Package
Angular Material Renderers
### Additional context
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.