Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: DaisyUI 5: Even though the container element has justify-center, setting width to an <input> element doesn't shrink the <input> element #3328

Open
lts20050703 opened this issue Dec 20, 2024 · 6 comments
Open

bug: DaisyUI 5: Even though the container element has justify-center, setting width to an <input> element doesn't shrink the <input> element #3328

lts20050703 opened this issue Dec 20, 2024 · 6 comments
Assignees
@saadeghi
Labels
v5

Comments

@lts20050703
Copy link

What version of daisyUI are you using?

5.0.0-alpha.51

Which browsers are you seeing the problem on?

All browsers

Reproduction URL

https://play.tailwindcss.com/N2jb6X1w9J

Describe your issue

<div class="grid grid-cols-[auto_auto] justify-center">
  <label class="input input-primary flex items-center">
    <input class="w-8" />
    <div>ms</div>
  </label>
  <label class="input input-primary flex items-center">
    <input class="w-8" />
    <div>ms</div>
  </label>
  <label class="input input-primary flex items-center">
    <input class="w-8" />
    <div>ms</div>
  </label>
  <label class="input input-primary flex items-center">
    <input class="w-8" />
    <div>ms</div>
  </label>
</div>

DaisyUI 4: https://play.tailwindcss.com/O5rljzE52Q

Docs: https://daisyui.com/components/input/#text-input-with-icon-inside

image

DaisyUI 5: https://play.tailwindcss.com/N2jb6X1w9J

Docs: https://v5.daisyui.com/components/input/#text-input-with-text-label-inside

image

Looks like the input class is setting the element's width to 100%, overriding my w-8 class

image
@github-actions GitHub Actions
Copy link

Thank you @lts20050703 for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

@lts20050703
Copy link
Author

image

It looks like DaisyUI 5 now enforce width: 100% to the input class. Is this intentional?

@lts20050703
Copy link
Author

Context: I could set the container's width, but the thing is, I'm making a input that auto-grow to fit the text inside it. It would be much easier to set the width of the <input> element. Setting the container's width requires calculating the width of the <input> element AND the <div>ms<div> element, adding them together

@lts20050703
Copy link
Author

Workaround: change class="w-8" to style="width: 32px". I use ev.currentTarget.style.width = `${width}px` to override the class="w-8" anyways, might as well as use inline style to override daisyUI's width: 100%

@lts20050703
Copy link
Author

the .input class now also enforce max-width, is this also intentional?

@saadeghi saadeghi self-assigned this Dec 20, 2024
@saadeghi
Copy link
Owner

Fixed in 5.0.0-alpha.52

Now it's lower CSS specificity to allow us modify the width using utility classes.

The reason it has width by default:
https://play.tailwindcss.com/l9fHW0eGKT

@saadeghi saadeghi added the v5 label Dec 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@saadeghi saadeghi

Labels
v5
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@saadeghi @lts20050703