Model doesn't open

[xtfer]

I have a modal defined, but while clicking on this link triggers the event (I can pick it up in an event listener) the modal never appears. Any ideas?

<a onclick="Livewire.emit("openModal", "personal.request-modals.accept-sharing-request-modal", {"item":"abc123"})" href="#" class="...">
    Accept and share
</a>

The modal controller is App\Controllers\Livewire\Personal\RequestModals\AcceptSharingRequestModal.

[rohan-krishna]

Are you using Tailwind 3 by any chance?

[omaresmael]

yes, I'm using it. is that a problem?
and I'm having this issue I'm my console

VM582 app.js:1659 Alpine Expression Error: activeComponent is not defined

Expression: "activeComponent == 'b40ca9ad5adbd9bbd40e9b2e5de94373'"

[freeentr]

same here, appears only overlay (with 2 scroll bars [one nested behind overlay]) & no content from blade file. using just fresh setup.

[lewislarsen]

Experiencing the same here, the overlay appears with a scrollbar but no content is shown. Using Tailwind 3 (latest version) too.

Anything inside the <div></div> for the modal doesn't show.

Versions used:
Modal 1.0.3
Livewire v2.8.2
Laravel v88.77.1
Tailwind 3.0.8
AlpineJS 3.7.1

Here's a GitHub repo with the problem: https://github.com/LewisLarsen/modal

[dennykurniawan48]

Did you find a solution?

[omaresmael]

do you guys have the same console issue?
@lewislarsen @freeentr

[PhiloNL]

Did you whitelist the modal in your tailwind config?

module.exports = {
    content: [
        './vendor/wire-elements/modal/**/*.blade.php',
    ],

    options: {
        safelist: [
            "sm:max-w-sm",
            "sm:max-w-md",
            "sm:max-w-lg",
            "sm:max-w-xl",
            "sm:max-w-2xl",
            "sm:max-w-3xl",
            "sm:max-w-4xl",
            "sm:max-w-5xl",
            "sm:max-w-6xl",
            "sm:max-w-7xl"
        ]
    },
};

[snapey]

Tailwind 3, the safelist does not need to be inside an options object

https://tailwindcss.com/docs/content-configuration#safelisting-classes

When I added safelist without this , it started working properly.

[lewislarsen]

Did you whitelist the modal in your tailwind config?

module.exports = {
    content: [
        './vendor/wire-elements/modal/**/*.blade.php',
    ],

    options: {
        safelist: [
            "sm:max-w-sm",
            "sm:max-w-md",
            "sm:max-w-lg",
            "sm:max-w-xl",
            "sm:max-w-2xl",
            "sm:max-w-3xl",
            "sm:max-w-4xl",
            "sm:max-w-5xl",
            "sm:max-w-6xl",
            "sm:max-w-7xl"
        ]
    },
};

I have given it a go but unfortunately I'm still getting no content in the modal, only a dimmed background with the changes added to my tailwind.config.js.

[dgillier]

Same here

[dgillier]

Hello, Same here...

Dimmed background, and no content.
The content is in the HTML page, so its probably a css problem...
(no js console errors)

[MrMooky]

I had the same problem and needed to change the modal classes. The content is actually there, but out of viewport. If you scroll down, you should see the content.

[lewislarsen]

I had the same problem and needed to change the modal classes. The content is actually there, but out of viewport. If you scroll down, you should see the content.

What did you change the classes to? The issue may be closed if that's the solution! :)

[fabio-ivona]

I'm experiencing the same issue, it happens if I use modalMaxWidth settings higher than 2xl:

public static function modalMaxWidth(): string
{
    return '4xl';
}

used versions

• tailwind version: 3.0.9
• wire-elements/modal: 1.0.3

no issues if I use 2xl or xl:

xl

2xl

3xl

[3xl] If I reduce the screen width, the modal appears from below and starts going up as I narrow the window:

[3xl] and it suddenly pops in position for width<640

any idea? 🤔

[MrMooky]

What did you change the classes to? The issue may be closed if that's the solution! :)

I changed a few things to get it working (and to apply custom behaviour). This is my current modal.blade.php:

<div>
    @isset($jsPath)
        <script>{!! file_get_contents($jsPath) !!}</script>
    @endisset
    @isset($cssPath)
        <style>{!! file_get_contents($cssPath) !!}</style>
    @endisset

    <div
            x-data="LivewireUIModal()"
            x-init="init()"
            x-on:close.stop="show = false"
            x-on:keydown.escape.window="closeModalOnEscape()"
            x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
            x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
            x-show="show"
            class="fixed inset-0 z-10 overflow-y-auto"
            style="display: none;"
    >
        <div class="flex items-start justify-center min-h-screen text-center">
            <div
                    x-show="show"
                    x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    class="fixed inset-0 transition-all transform"
            >
                <div class="absolute inset-0 bg-bodyText/70"></div>
            </div>

            <div
                x-show="show && showActiveComponent"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 translate-y-0 scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 translate-y-0 scale-95"
                x-bind:class="modalWidth"
                class="inline-block w-full px-5 pt-5 mt-[10vh] bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all m-3"
            >
                @forelse($components as $id => $component)
                    <div x-show.immediate="activeComponent == '{{ $id }}'" x-ref="{{ $id }}" wire:key="{{ $id }}">
                        @livewire($component['name'], $component['attributes'], key($id))
                    </div>
                @empty
                @endforelse
            </div>
        </div>
    </div>
</div>

[fabio-ivona]

@MrMooky changes solve the issue

specifically, you only need to change

<div class="flex items-end justify-center min-h-screen px-4 pt-4 pb-10 text-center sm:block sm:p-0">

to

<div class="flex items-start justify-center min-h-screen text-center">

at line 20

just wondering if this breaks something else

should we open a PR to fix it?

[MrMooky]

just wondering if this breaks something else

I don't think so. I'd guess this was supposed to be a setting for mobile screens, so overlays appear at the bottom and are easier to reach.

[DanielSpravtsev]

Confirm this. As it mentioned before, just add safelist classes to tailwind config:

safelist: [
{
pattern: /max-w-(sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl)/,
variants: ['sm', 'md', 'lg', 'xl', '2xl'],
},
],

[snapey]

I have the same issue. Had to publish the layout so that it is picked up by the tailwind compiler. Model content appears at the bottom of the screen on mobile widths but disappears on larger screens.

Adding safelist as mentioned above makes no difference

[snapey]

safelist does not need to be inside options object

https://tailwindcss.com/docs/content-configuration#safelisting-classes

[Suresh29031967]

This problem is still there. None of the above solutions worked. The modal still opens at the bottom of the page. Any suggestions will be useful.

[erickepner]

This just started happening to all of my projects that use v1 of this package, seemingly overnight. The only fix I have figured out is to just upgrade to Livewire 3 and v2 of this package which I just can't afford to do right now for all of these applications. It does fix the problem though.

I have tried everything in this thread to no avail, any idea what may have caused this?