search

creativetimofficial / material-tailwind

@material-tailwind is an easy-to-use components library for Tailwind CSS and Material Design.
https://material-tailwind.com/
MIT License
3.74k stars 320 forks source link

For a Select component with the outlined variant, the outline has a break in it when there is no label #578

Closed jlutteringer closed 7 months ago

jlutteringer commented 8 months ago

When using a select like so:

  <Select variant="outlined">
    <Option>Material Tailwind HTML</Option>
    <Option>Material Tailwind React</Option>
    <Option>Material Tailwind Vue</Option>
    <Option>Material Tailwind Angular</Option>
    <Option>Material Tailwind Svelte</Option>
  </Select>

There is a break in the top border where the label is supposed to go - but there is no label present. This is because there is a margin applied to the :before and :after pseudo elements which construct the top of the component's border around the label. This margin still gets applied in circumstances where there is no label - resulting in a break in the border.

There is a sort of workaround by using the theme system to remove the margins, but this means that whenever you DO have a label, the border runs right into the label text.

Here's an example of what it looks like:

Screenshot 2024-02-01 at 11 43 10 AM
jlutteringer commented 8 months ago

For the record, this same issue also applies to Input elements

sajadevo commented 7 months ago

@jlutteringer the label is required for each input, select and textarea components and if you want to have them without label you need to provide some set of custom styles for each component, check the link below for an example of input component without label https://www.material-tailwind.com/docs/react/input#input-custom-styles