Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Radio button is compressed horizontally when the label text is long and not written in alphabet #569

Closed
whitphx opened this issue Mar 9, 2022 · 2 comments
Labels

Comments

@whitphx
Copy link

whitphx commented Mar 9, 2022

With the HTML below,

<div className="form-control">
  <label className="label cursor-pointer">
    <span className="label-text">
      あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお
    </span>
    <input type="radio" value="foo" className="radio" />
  </label>
</div>

the result rendered in a narrow window would be like the following, where the radio button is compressed horizontally.
localhost_3000_(Pixel 5)

I found it can be fixed to set min-width: 1.5rem to the radio element,
so now I added the following workaround to my project.

tailwindconfig.js

module.exports = {
  //
  theme: {
    minWidth: ({ theme }) => ({
      ...theme("width"),
    }),
  },
  plugins: [require("daisyui")],
};

global.css

.radio {
  @apply min-w-6;
}

and the result would be below, where the radio style works correctly.
localhost_3000_(Pixel 5) (1)

As I'm a tailwind newbie and not sure if this is a correct workaround though, I hope it helps someone and the problem is fixed in the upstream.

@saadeghi
Copy link
Owner

saadeghi commented Mar 9, 2022

Fixed in 2.6.4
Thanks!

@whitphx
Copy link
Author

whitphx commented Mar 9, 2022

Super fast! Thanks!

inorganik pushed a commit to inorganik/daisyui that referenced this issue Feb 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants