modal-box sizing

[vasilejianu]

hello, the tailwind width utilities don't seem to work when used on the modal-box div , i would like to have a wider div any help ?

for example
div class="modal-box w-full"

[SavarJ]

I faced this exact problem today. By playing around in the dev tools I found out that the label which is inside the main label should have 2 classes max-w-none and whatever width you want like w-full

Example of last modal in DaisyUi: Modal that closes when clicked outside

<!-- The button to open modal -->
<label for="my-modal-4" class="btn modal-button">open modal</label>

<!-- Put this part before </body> tag -->
<input type="checkbox" id="my-modal-4" class="modal-toggle">
<label for="my-modal-4" class="modal cursor-pointer">
  <label class="modal-box relative **max-w-none w-full**" for="">
    <h3 class="text-lg font-bold">Congratulations random Interner user!</h3>
    <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
  </label>
</label>

Edit: Fixed formatting of code

[saadeghi]

Yes, as @SavarJ mentioned, you need to define a max width value.
The reason is, modal-box should be responsive by default, it is w-full by default to fill the screen but on larger screens it won't look good if it covers 100% of width.
If you see the source code, the style has w-full sm:max-w-lg which results the following in browser:

.modal-box {
  width: 100%;
}
@media (min-width: 640px){
  .modal-box {
      max-width: 32rem;
  }
}

So you can make it bigger than 32rem by using any other max-width value (like max-w-full)

[vasilejianu]

thank you for your responses

[VenomFate-619]

Hey, I want to change the max-width from 32rem to 80rem.
doing this

<div className="modal-box relative p-0 max-h-[700px]  w-11/12  max-w-7xl"  onClick={(e) => e.stopPropagation()}>

but didn't work, I think the problem is with priority

[smilefl0w]

Hi,
the same issue occured again.
I have set up a test page within my project without my django base.html extension to check if there are any issues on my end.
I exclusively use the daisyui extension in my tailwind.config.js
Other changes do apply. height and lower width.
max-width: 32rem; can't be overwritten by tailwind classes for expandable width.
Any suggestions with the 2024 daisyUI version 4.6.1?

This is the example code provided on the daisyui website:

<button class="btn" onclick="my_modal_4.showModal()">open modal</button>
    <dialog id="my_modal_4" class="modal">
    <div class="modal-box">
        <h3 class="font-bold text-lg">Hello!</h3>
        <p class="py-4">Click the button below to close</p>
        <div class="modal-action">
        <form method="dialog">
            <!-- if there is a button, it will close the modal -->
            <button class="btn">Close</button>
        </form>
        </div>
    </div>
    </dialog>

[smilefl0w]

Solution
used style="max-width:none;" inside modal-box div.