[2.x] Fix overflow hidden issue with overlaping elements inside form …

…section (#668) * Fix overflow hidden issue with overlaping elements inside form section * Update form-section.blade.php Co-authored-by: Dries Vints <dries@vints.io>
laravel · Feb 9, 2021 · 1871fb4 · 1871fb4
1 parent 355262d
commit 1871fb4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 19 deletions.
diff --git a/resources/views/components/form-section.blade.php b/resources/views/components/form-section.blade.php
@@ -8,19 +8,17 @@
 
     <div class="mt-5 md:mt-0 md:col-span-2">
         <form wire:submit.prevent="{{ $submit }}">
-            <div class="shadow overflow-hidden sm:rounded-md">
-                <div class="px-4 py-5 bg-white sm:p-6">
-                    <div class="grid grid-cols-6 gap-6">
-                        {{ $form }}
-                    </div>
+            <div class="px-4 py-5 bg-white sm:p-6 shadow {{ isset($actions) ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md' }}">
+                <div class="grid grid-cols-6 gap-6">
+                    {{ $form }}
                 </div>
-
-                @if (isset($actions))
-                    <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6">
-                        {{ $actions }}
-                    </div>
-                @endif
             </div>
+
+            @if (isset($actions))
+                <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md">
+                    {{ $actions }}
+                </div>
+            @endif
         </form>
     </div>
 </div>
diff --git a/stubs/inertia/resources/js/Jetstream/FormSection.vue b/stubs/inertia/resources/js/Jetstream/FormSection.vue
@@ -7,16 +7,15 @@
 
         <div class="mt-5 md:mt-0 md:col-span-2">
             <form @submit.prevent="$emit('submitted')">
-                <div class="shadow overflow-hidden sm:rounded-md">
-                    <div class="px-4 py-5 bg-white sm:p-6">
-                        <div class="grid grid-cols-6 gap-6">
-                            <slot name="form"></slot>
-                        </div>
+                <div class="px-4 py-5 bg-white sm:p-6 shadow"
+                    :class="hasActions ? 'sm:rounded-tl-md sm:rounded-tr-md' : 'sm:rounded-md'">
+                    <div class="grid grid-cols-6 gap-6">
+                        <slot name="form"></slot>
                     </div>
+                </div>
 
-                    <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6" v-if="hasActions">
-                        <slot name="actions"></slot>
-                    </div>
+                <div class="flex items-center justify-end px-4 py-3 bg-gray-50 text-right sm:px-6 shadow sm:rounded-bl-md sm:rounded-br-md" v-if="hasActions">
+                    <slot name="actions"></slot>
                 </div>
             </form>
         </div>