Flux:modal sizing

[kemdo25]

Please i have reviewed i didn't see modal sizing from documentation, closed git issues and open, please if there is a way to do so help me out, or there is missing please add it

enable size attribute:

<flux:modal size="lg" name="new-license" class="md:w-full space-y-6">
         -----
</flux:modal>

[andreas-freitag]

You can alter the width in the way you mentioned here

class="md:w-full"

however, the modal has a hardcoded max-width, unfortunately:

default => 'p-6 [:where(&)]:max-w-xl shadow-lg rounded-xl',

I would also like that to be NOT hardcoded but somehow parameterized because max-w-xl is really narrow.

[ipontt]

The modal can be made bigger by adding the max-w class to it.

<flux:modal name="modal-name" class="w-full max-w-3xl space-y-6">...</flux:modal>

[SiadProgrammer]

have you tested this? still not working

[SiadProgrammer]

i think @calebporzio should take this in to action plan

[ju5t]

We use this and that works perfectly fine:

class="w-full max-w-full sm:max-w-md md:max-w-xl lg:max-w-2xl"

[jeffchown]

In my testing, the 'trick' to implementing @ipontt's and @ju5t's examples was making sure I included w-full along with my desired max-w-* settings (which I wasn't always doing in the past). Without it, my max-w-* settings were ignored and the default max-w-xl in the flux:modal code was always used.

Gotta love CSS ;)

Knowing this now, the hardcoded max-w-xl in flux:modal doesn't bother me as much and I don't feel the same need to have it altered/removed. (though it is a narrow default ;)

[yangsystem]

Just let the modal be largen and we will limit it ourselves according to our needs.
I can wrap the content of the modal in a:
<div class="w-3/4"> Content </div>

I do not know if there are any implications on mobile (I play only with desktop)