select-xs doesn't work in DaisyUI v5.6. It worked in previous versions. #4620
cristhiancustodio
started this conversation in
General
Replies: 3 comments 1 reply
|
Can you post a reproduction? <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>daisyUI Select Test Page</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="m-4">
<select class="select select-xs">
<option disabled selected>Xsmall</option>
<option>Xsmall Apple</option>
<option>Xsmall Orange</option>
<option>Xsmall Tomato</option>
</select>
<select class="select select-sm">
<option disabled selected>Small</option>
<option>Small Apple</option>
<option>Small Orange</option>
<option>Small Tomato</option>
</select>
<select class="select select-md">
<option disabled selected>Medium</option>
<option>Medium Apple</option>
<option>Medium Orange</option>
<option>Medium Tomato</option>
</select>
<select class="select select-lg">
<option disabled selected>Large</option>
<option>Large Apple</option>
<option>Large Orange</option>
<option>Large Tomato</option>
</select>
<select class="select select-xl">
<option disabled selected>Xlarge</option>
<option>Xlarge Apple</option>
<option>Xlarge Orange</option>
<option>Xlarge Tomato</option>
</select>
</div>
</body>
</html> |
0 replies
|
It works: https://daisyui.com/components/select/#sizes Can you please share a minimal reproduction link? |
1 reply
|
Hi, Here's the link: it works correctly with version 5.5, but I need to use version 5.6. <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body>
<select class="select select-xs">
<option disabled selected>Xsmall</option>
<option>Xsmall Apple</option>
<option>Xsmall Orange</option>
<option>Xsmall Tomato</option>
</select>
<select class="select select-sm">
<option disabled selected>Small</option>
<option>Small Apple</option>
<option>Small Orange</option>
<option>Small Tomato</option>
</select>
<select class="select select-md">
<option disabled selected>Medium</option>
<option>Medium Apple</option>
<option>Medium Orange</option>
<option>Medium Tomato</option>
</select>
<select class="select select-lg">
<option disabled selected>Large</option>
<option>Large Apple</option>
<option>Large Orange</option>
<option>Large Tomato</option>
</select>
<select class="select select-xl">
<option disabled selected>Xlarge</option>
<option>Xlarge Apple</option>
<option>Xlarge Orange</option>
<option>Xlarge Tomato</option>
</select>
<input type="text" placeholder="Xsmall" class="input input-xs" />
<input type="text" placeholder="Small" class="input input-sm" />
<input type="text" placeholder="Medium" class="input input-md" />
<input type="text" placeholder="Large" class="input input-lg" />
<input type="text" placeholder="Xlarge" class="input input-xl" />
<br>
<input type="radio" name="radio-2" class="radio radio-xs" checked="checked" />
<input type="radio" name="radio-2" class="radio radio-sm" checked="checked" />
<input type="radio" name="radio-2" class="radio radio-md" checked="checked" />
<input type="radio" name="radio-2" class="radio radio-lg" checked="checked" />
<input type="radio" name="radio-2" class="radio radio-xl" checked="checked" />
<br>
<input type="checkbox" checked="checked" class="checkbox checkbox-xs" />
<input type="checkbox" checked="checked" class="checkbox checkbox-sm" />
<input type="checkbox" checked="checked" class="checkbox checkbox-md" />
<input type="checkbox" checked="checked" class="checkbox checkbox-lg" />
<input type="checkbox" checked="checked" class="checkbox checkbox-xl" />
</body>
</html> |
|
I got it - the order how they are generated - now the select and select-md are generated after select-xs and select-sm |
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
I'm using the DaisyUI CDN:
However, when I use
select-xsorselect-sm, they have the same size asselect-md.The same issue also occurs with input elements.
I need to use the new DaisyUI designs in my project, where I don't use npm for several reasons.
Previous versions such as 5.5, 5.4, etc. work correctly, but I specifically want to use version 5.6.
I'm using Google Chrome as my browser.
All reactions