remove no-gutters and use v-if to check visibility so we can remove invisible elements to not have extra padding from the v-col

Author: kchobantonov

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

@@ -9,11 +9,11 @@
     <v-row
       v-for="(element, index) in (layout.uischema as Layout).elements"
       :key="`${layout.path}-${(layout.uischema as Layout).elements.length}-${index}`"
-      no-gutters
       v-bind="vuetifyProps(`v-row[${index}]`)"
     >
       <v-col
         cols="12"
+        v-if="isVisible(element, layout.path)"
         :class="styles.verticalLayout.item"
         v-bind="vuetifyProps('v-col')"
       >
@@ -31,7 +31,15 @@
 </template>
 
 <script lang="ts">
-import { type Layout } from '@jsonforms/core';
+import {
+  getAjv,
+  getConfig,
+  getData,
+  hasShowRule,
+  isVisible,
+  type Layout,
+  type UISchemaElement,
+} from '@jsonforms/core';
 import {
   DispatchRenderer,
   rendererProps,
@@ -40,7 +48,7 @@ import {
 } from '@jsonforms/vue';
 import { defineComponent } from 'vue';
 import { VCol, VContainer, VRow } from 'vuetify/components';
-import { useVuetifyLayout } from '../util';
+import { useJsonForms, useVuetifyLayout } from '../util';
 
 const layoutRenderer = defineComponent({
   name: 'vertical-layout-renderer',
@@ -54,7 +62,26 @@ const layoutRenderer = defineComponent({
     ...rendererProps<Layout>(),
   },
   setup(props: RendererProps<Layout>) {
-    return useVuetifyLayout(useJsonFormsLayout(props));
+    const jsonforms = useJsonForms();
+    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
+    isVisible(uischema: UISchemaElement, path: string): boolean {
+      if (hasShowRule(uischema)) {
+        const state = { jsonforms: this.jsonforms };
+        const rootData = getData(state);
+
+        return isVisible(
+          uischema,
+          rootData,
+          path,
+          getAjv(state),
+          getConfig(state),
+        );
+      }
+      return true;
+    },
   },
 });