issue with date picker / dropdown changing height when values assigned

[thornec]

When the value of the date picker and dropdown is empty the height is normal and as shown in the documentation.

When a value is selected the height of them seems to change and look a bit more blocky, anything I can do to fix the sizing?

[mitrotasios]

Hi @thornec, thanks for spotting this! Would you mind sharing some kind of code snippet so that I can have a look at it in a bit more detail?

[Junaid300]

I am not sure about this issue May be he has added additional library for styling that is causing conflict. Is it cause conflict with tailwind ?
I am using Vite and Tailwind here is the screenshot

Here is my code: https://stackblitz.com/edit/vitejs-vite-nvxrbb?file=tailwind.config.cjs,src%2Findex.css,src%2FApp.jsx,src%2Fmain.jsx,package.json&terminal=dev

[mitrotasios]

hi @Junaid300, this is a specificity issue introduced by tailwinds pre-flight config. Specifically, this part:

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

We are evaluating how we can best increase specificity for our button elements to avoid this kind of behaviour. For now, I would suggest that you first import the index.css file in your project and then the tremor.css file in your main.jsx. This should work for now.

Please refer to this issue for more details: https://github.com/tailwindlabs/tailwindcss/issues/6602