Issue - Input Element UI CSS

[chandansomani]

I have encounter a issue in Input Element Steps to reproducde :

1. Go To : https://www.material-tailwind.com/docs/react/modal
2. Open Add Product Model :
3. Fill 1st Inputbox box with some text, ( or fill values in input text box )
4. Move focus to other element

The Top border of Input Element Text box, border goes hidden, the input label is causing issue. It can we seen happing for each instance of input box.

[tman16]

Same issue

the culprit is global.css applying

.border-t-transparent { border-top-color: #0000 !important; }

Make sure you don't use a class applied to top only i.e. border-t-blue-gray-200, if you have this use without the "-t-" for example: border-blue-gray-200

For the focus its the otherway round you must include the "-t-" so use for example focus:border-t-gray-900, if you don't specify the "-t-" it will be transparent

In full try this className="w-full placeholder:opacity-100 focus:border-t-gray-900 border-blue-gray-200"

[chandansomani]

Same issue

the culprit is global.css applying

.border-t-transparent { border-top-color: #0000 !important; }

Make sure you don't use a class applied to top only i.e. border-t-blue-gray-200, if you have this use without the "-t-" for example: border-blue-gray-200

For the focus its the otherway round you must include the "-t-" so use for example focus:border-t-gray-900, if you don't specify the "-t-" it will be transparent

In full try this className="w-full placeholder:opacity-100 focus:border-t-gray-900 border-blue-gray-200"

This didnt help, i would like to elaborate the issue is the Label text of the Component, Just set label={"Some text"} and remove labelProps You can see the culprit, this child label

[chandansomani]

Found one issue : 1] The Scrollbar of overflow has a bug, also CardHeader has wired behaviour

2] The Card Component has a default Padding , not configurable :

[sanwalsulehri]

what if i done this

[tbp2-jyates]

I have encounter a issue in Input Element Steps to reproducde :

1. Go To : https://www.material-tailwind.com/docs/react/modal
2. Open Add Product Model :
3. Fill 1st Inputbox box with some text, ( or fill values in input text box )
4. Move focus to other element

The Top border of Input Element Text box, border goes hidden, the input label is causing issue. It can we seen happing for each instance of input box.

Not necessarily related to the product modal itself, but I had this issue with the Input field and was able to fix the border with "placeholder-shown:border-blue-900", or whatever colour you choose. It seems the placeholder-shown pseudo-class is the culprit for the top border not showing