[1.x] Make livewire modal scrollable (#378)

* Lock inertiajs/inertia-laravel to ^0.2.4 (#371) * Prevent body from scrolling when modal is open * Replace flex-centering with mx-auto * Make Modal scrollable * inset-0, overflow-y-auto - scroll the modal * py-6 - add bottom padding for the modal parent * Fix for FF Replace parent `padding-bottom` to child `margin-bottom` as described here https://stackoverflow.com/a/38177668/3071884 * Inertia: Replace flex-centering with mx-auto * Inertia: Make Modal scrollable * Inertia: Fix for FF * Update InstallCommand.php Co-authored-by: Claudio Dekker <[email protected]> Co-authored-by: Taylor Otwell <[email protected]>
laravel · Oct 22, 2020 · 24d3893 · 24d3893
1 parent e73cb2a
commit 24d3893
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -41,13 +41,20 @@
  nextFocusableIndex() { return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) },
  prevFocusableIndex() { return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 },
  }"
+ x-init="$watch('show', value => {
+ if (value) {
+ document.body.classList.add('overflow-y-hidden');
+ } else {
+ document.body.classList.remove('overflow-y-hidden');
+ }
+ })"
  x-on:close.stop="show = false"
  x-on:keydown.escape.window="show = false"
  x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
  x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
  x-show="show"
  id="{{ $id }}"
- class="fixed top-0 inset-x-0 px-4 pt-6 z-50 sm:px-0 sm:flex sm:items-top sm:justify-center"
+ class="fixed inset-0 overflow-y-auto px-4 pt-6 z-50 sm:px-0"
  style="display: none;"
 >
  <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false" x-transition:enter="ease-out duration-300"
@@ -59,7 +66,7 @@ class="fixed top-0 inset-x-0 px-4 pt-6 z-50 sm:px-0 sm:flex sm:items-top sm:just
  <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
  </div>
 
- <div x-show="show" class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }}"
+ <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full {{ $maxWidth }} sm:mx-auto"
  x-transition:enter="ease-out duration-300"
  x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"

diff --git a/stubs/inertia/resources/js/Jetstream/Modal.vue b/stubs/inertia/resources/js/Jetstream/Modal.vue
@@ -1,7 +1,7 @@
 <template>
  <portal to="modal">
  <transition leave-active-class="duration-200">
- <div v-show="show" class="fixed top-0 inset-x-0 px-4 pt-6 sm:px-0 sm:flex sm:items-top sm:justify-center">
+ <div v-show="show" class="fixed inset-0 overflow-y-auto px-4 pt-6 sm:px-0">
  <transition enter-active-class="ease-out duration-300"
  enter-class="opacity-0"
  enter-to-class="opacity-100"
@@ -19,7 +19,7 @@
  leave-active-class="ease-in duration-200"
  leave-class="opacity-100 translate-y-0 sm:scale-100"
  leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
- <div v-show="show" class="bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full" :class="maxWidthClass">
+ <div v-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full sm:mx-auto" :class="maxWidthClass">
  <slot></slot>
  </div>
  </transition>