refactor: Improve spacing behavior for nested layouts with conditional visibility #2533

kchobantonov · 2026-01-19T23:21:56Z

The vertical, horizontal renderers were adding unwanted padding and spacing even when child elements were hidden or not rendered. This caused layout issues with:

Empty spaces appearing when controls had visible: false
Excessive padding accumulating in deeply nested layouts
Inconsistent spacing between visible elements

Make the group layout and array layouts/control to use collapsable panels to make it easy to deal with array with large number of elements if we want to collapse the whole array UI into just one row.
Make the space usage similar to react - e.g. remove exta margins and/or paddings
Other minor fixes

… renderers

…p layouts now do not have extra paddings

…erties section

…add up, also fixed the issue where some of the children can be hidden for which no padding is added

…remove extra padding

netlify · 2026-01-19T23:22:03Z

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	`9eabb1b`
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/6973a7eeb211cf000891cf94
😎 Deploy Preview	https://deploy-preview-2533--jsonforms-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

kchobantonov · 2026-01-20T00:01:26Z

@sdirix @lucas-koehler please review - new demo example employee-registration

kchobantonov · 2026-01-20T16:57:38Z

found an issue with horizontal layout when we do not use padding but gap in order to fix the issue with the elements that are invisible because of the security to not have extra space but this breaks when we want to use number of columns in the UI model like

"options": {
    "vuetify": {
      "v-col": [
        {
          "cols": 8
        },
        {
          "cols": 2
        }
      ]
    }
  }

…ut can't be easily fixed with gap and allowing the v-col cols property to work

kchobantonov · 2026-01-20T19:58:53Z

fixing the horizontal and vertical layout by using no-gutters for vertical and fluid for both horizontal and vertical layouts

…nvisible elements to not have extra padding from the v-col

…ements that are not visible.

kchobantonov · 2026-01-20T22:44:40Z

fix removing extra paddings for invisible elements by not creating the v-col for such elements.

…rties

…not have v-container paddings

kchobantonov · 2026-01-23T16:57:11Z

@sdirix @lucas-koehler please review - the pr is ready now

coveralls · 2026-01-27T10:46:00Z

coverage: 82.798%. remained the same
when pulling 9eabb1b on kchobantonov:fix-layout
into d3662e2 on eclipsesource:master.

sdirix

Thanks for the contribution ❤️

Again this is difficult to review. This PR has 6+ different concerns wrapped into one pull request. Separate small PRs would make reviewing easier and would reduce the wait time for you to get feedback.

This PR addresses:

Layout visibility filtering (main goal?)
Converting v-card to v-expansion-panels
Spacing/padding cleanups
Unrelated control fixes
Dev changes
Unrelated Vue package changes, not directly tied to Vue-Vuetify

There are so many functionality and layout changes that it makes it really hard to test all of them besides a shallow "looks fine to me".

Please split them in the future.

Functionality wise most changes look fine.

The v-expansion-panels refactoring is an obvious breaking change for all adopters using them, in behavior as well as in configuration (e.g. when they used 'v-card' props to customize them). So this should be mentioned in the Breaking Changes / Migration guide. Again this would be easier as a separate PR.

Overall I don't have confidence for all the layout changes, I might have overlooked something.

Please have a look at the comments.

sdirix · 2026-02-11T11:43:49Z

packages/vue-vuetify/src/layouts/GroupRenderer.vue

+    },
+  },
+  methods: {
+    isVisible(uischema: UISchemaElement, path: string): boolean {


This isVisible method is copy-pasted across 3 files: HorizontalLayoutRenderer, VerticalLayoutRenderer, GroupRenderer. Maybe this should be a shareable composition? Maybe the same for visibleElementsWithIndex? This wouild also allow to unify the behavior between Horizontal and Vertical rendering as they implement this logic differently now.

sdirix · 2026-02-11T11:47:44Z

packages/vue/src/components/UnknownRenderer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>No applicable renderer found.</div>
+  <div :style="{ color: 'red' }">No applicable renderer found.</div>


We usually avoid hard coded styling in the non-renderer and Vanilla packages. This should get a proper class so it can be styled as required by adopters.

I know we do it in React too but this is more of an old historical oversight.

I would prefer using a class over inline styling.

sdirix · 2026-02-11T11:51:17Z

pnpm-lock.yaml

This change is unnecessary

sdirix · 2026-02-11T11:53:22Z

packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue

    >
      <v-col
        cols="12"
+        v-if="isVisible(element, layout.path)"


Instead of this v-if we could already iterate over the filtered list like in the other renderers

sdirix · 2026-02-11T11:54:29Z

packages/vue-vuetify/src/layouts/VerticalLayoutRenderer.vue

+    return { ...useVuetifyLayout(useJsonFormsLayout(props)), jsonforms };
+  },
+  methods: {
+    // helper method to check visibility and if not visible to remove the v-col since otherwise it will add extra padding


Not sure the comment is needed here

sdirix · 2026-02-11T12:10:52Z

packages/vue-vuetify/src/layouts/GroupRenderer.vue

+      <v-expansion-panel-title
+        :class="styles.group.label"
+        v-bind="vuetifyProps('v-expansion-panel-title')"
+        >{{ layout.label }}</v-expansion-panel-title


Now that Groups are clickable it's a bit weird that the label can be empty. However I also don't have a good suggestion for this case. Maybe add an icon if the label is empty? Or revert to the old v-card grouping? Not sure. See the rule example to check how this looks like in the UI.

kchobantonov added 12 commits January 19, 2026 16:41

update vuetify

616522f

add new example for layouts

a6a3a6c

update the unknown render to show the message in red similar to react…

c58de82

… renderers

wrap the form to have some padding since the vertical/horizontal/grou…

1f77dff

…p layouts now do not have extra paddings

use expansion-panels so that we can collaps the whole additional prop…

3d14b16

…erties section

add default density to match other vuetify text fields as hight

5501cea

use collapsable panels for group layout

1942829

remove any paddings so if we use nested layouts those padding do not …

0dcd847

…add up, also fixed the issue where some of the children can be hidden for which no padding is added

use inline for horizontal/vertical radio group layout

0c38668

use expansion panels so we can collapse/expand the array items, also …

fadefdd

…remove extra padding

use all space

c27a8cc

remove extra v-card, remove extra margin from stepper window

2592acc

revert the vuetify upgrade and leave that to other opened PRs

ba95800

kchobantonov marked this pull request as draft January 20, 2026 16:55

revert using the gap and stick with padding since the horizontal layo…

1c751ab

…ut can't be easily fixed with gap and allowing the v-col cols property to work

kchobantonov added 2 commits January 20, 2026 17:25

remove no-gutters and use v-if to check visibility so we can remove i…

e04df21

…nvisible elements to not have extra padding from the v-col

show only the visible elements and do not preserve extra space for el…

8fb68bb

…ements that are not visible.

kchobantonov marked this pull request as ready for review January 20, 2026 22:43

kchobantonov and others added 7 commits January 20, 2026 18:29

allow applying v-row and v-col props for all rows/columns

a6abd59

wrap items with visibility check

fb20772

update render to be useful under dynamic context like additionalPrope…

b81f30f

…rties

revert the no-gutters

a14d492

add gap between the object and the additional properties since we do …

529d129

…not have v-container paddings

fix snapshots

985ca54

Merge branch 'master' into fix-layout

9eabb1b

sdirix requested changes Feb 11, 2026

View reviewed changes

refactor: Improve spacing behavior for nested layouts with conditional visibility #2533

Are you sure you want to change the base?

refactor: Improve spacing behavior for nested layouts with conditional visibility #2533

Conversation

kchobantonov commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for jsonforms-examples ready!

Uh oh!

kchobantonov commented Jan 20, 2026

Uh oh!

kchobantonov commented Jan 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kchobantonov commented Jan 20, 2026

Uh oh!

kchobantonov commented Jan 20, 2026

Uh oh!

kchobantonov commented Jan 23, 2026

Uh oh!

coveralls commented Jan 27, 2026

Uh oh!

sdirix left a comment

Choose a reason for hiding this comment

Uh oh!

sdirix Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

sdirix Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

sdirix Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

sdirix Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

sdirix Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

sdirix Feb 11, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kchobantonov commented Jan 19, 2026 •

edited

Loading

netlify bot commented Jan 19, 2026 •

edited

Loading

kchobantonov commented Jan 20, 2026 •

edited

Loading