search

saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library
https://daisyui.com
MIT License
33.25k stars 1.27k forks source link

select-sm display incorrectly #76

Closed aiguoli closed 3 years ago

aiguoli commented 3 years ago

hello, my code is

<body class="font-mono bg-gray-100 h-full p-8">
  <form class="container mx-auto w-1/2 flex flex-col space-y-3">
...
  <select class="select select-bordered select-sm w-full"">
    <option disabled="disabled" selected="selected">select</option>
    <option>1</option>
    <option>2</option>
  </select>
...
  </form>
</body>

but it displayed like this, the option is incomplete. image

atresnjo commented 3 years ago

Maybe some other CSS overriding it? Here's an example with your code, which displays the value correctly.

saadeghi commented 3 years ago

I think @atresnjo is right. To debug this issue. You need to compare the style from your inspect element with the example @atresnjo made. It might be a style from a container or another element. Something like a font size, line height, etc.
I'm closing this issue since it's not a bug from daisyUI but feel free to continue the conversation. I would be glad to help if I get more details about your code.

aiguoli commented 3 years ago

Thanks for your answer. But it's so wired that I copy my code into play page, it works perfect. 😭

code: https://play.tailwindcss.com/NDaYmAmRQr

play: image local: image local(delete select-sm): image

saadeghi commented 3 years ago

@aiguoli Can you try adding a py-0 class to <input>?
Based on what I see on the screenshot, it looks like there's a padding. I added a py-2 class and the result became similar to yours.
You need to check inspect element to see if there's a padding style for input and find the source of it.
I also see a blue border that shouldn't be there (for this theme) so I think your page has another css file affecting your input.

aiguoli commented 3 years ago

it works perfectly, thank you so much!!!😀

roelandxyz commented 1 year ago

I had this problem because the '@tailwindcss/forms' plugin was also loaded.