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

[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"
        ]
    },
};

[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]

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.