Livewire How to set the width of jetstream dialog-modal?

Question

I am using the dialog-modal of Jet-Stream, it works pretty fine but I don't understand how to fix its width.

Here below is the way I use it.

<x-dialog-modal wire:model="show_equipment_dialog" :maxWidth="'100%'">
    <x-slot name="title"> {{ __('Equipment Dialog') }}</x-slot>
    <x-slot name="content">
        @livewire('equipment-lw', ['usage' => 'chooser'])
    </x-slot>
    <x-slot name="footer">
        <x-secondary-button wire:click="closeEquipmentDialog">{{ __('Close the dialog') }}</x-secondary-button>
    </x-slot>
</x-dialog-modal>

with this in dialog-modal

@props(['id' => null, 'maxWidth' => null,'usage'=>'database'])

<x-jet-modal :id="$id" :maxWidth="$maxWidth" {{ $attributes }}>
<div class=" px-6 py-4">
    <div class="text-lg">
        {{ $title }}{{$maxWidth}}
    </div>

    <div class="mt-4">
        {{ $content }}
    </div>
</div>

<div class="px-6 py-4 bg-gray-100 text-right">
    {{ $footer }}
</div>

The maxWidth is passed to dialog-modal (I can see this thanks to the {{$maxWidth}} in the content slot) but has no effect on the x-jet-modal. What is the correct syntax?

Thank you for helping me.

score 2 · Answer 1 · answered Dec 22 '20 at 23:10

In your modal just add maxWidth="size-you-want". The available sizes are in resources\views\vendor\jetstream\components\modal.blade.php but you can add more. Those that are by default are sm, md, lg, xl, 2xl

<x-dialog-modal wire:model="show_equipment_dialog" maxWidth="md">
<x-slot name="title"> {{ __('Equipment Dialog') }}</x-slot>
<x-slot name="content">
    @livewire('equipment-lw', ['usage' => 'chooser'])
</x-slot>
<x-slot name="footer">
    <x-secondary-button wire:click="closeEquipmentDialog">{{ __('Close the dialog') }}</x-secondary-button>
</x-slot>

score 0 · Accepted Answer · answered Nov 03 '20 at 14:04

0

You can set the maxWidth of the modal in the vendor/jetstream/components "modal.blade.php" then find the switch statement of maxWidth

answered Nov 03 '20 at 14:04

John Kenneth Bantugan

16

score 0 · Answer 3 · edited Mar 03 '22 at 11:40

0

You can add the following in your modal component

$maxWidth = [
    'sm' => 'sm:max-w-sm', 'md' => 'sm:max-w-md', 'lg' => 'sm:max-w-lg', 'xl' => 'sm:max-w-xl', '2xl' => 'sm:max-w-2xl', '3xl' => 'sm:max-w-3xl', '4xl' => 'sm:max-w-4xl', '5xl' => 'sm:max-w-5xl', '6xl' => 'sm:max-w-6xl', '7xl' => 'sm:max-w-7xl', 'full' => 'sm:max-w-full',
][$maxWidth ?? '2xl'];

edited Mar 03 '22 at 11:40

Elikill58

4,050
24
23
45

answered Mar 03 '22 at 02:22

Leandro poma

1

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Yunnosch May 04 '22 at 17:47

Livewire How to set the width of jetstream dialog-modal?

3 Answers3