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

paper-radio-button label width is not constrained to the width of the container #111

Open
tmpduarte opened this issue Feb 15, 2017 · 1 comment

Comments

@tmpduarte
Copy link

Description

The label width of the paper-radio-button does not respect the width of the parent (paper-radio-button)

Expected outcome

It is expected that the label does not fall off the width provided to the paper-radio-button

Actual outcome

captura de ecra 2017-02-15 as 09 47 51

Please observe that the label (surrounded by a 1px solid black outline) is rendered outside of the paper-radio-button (cyan background color).

Steps to reproduce

  1. Put a containing div inside the page with some background-color
  2. Put the paper-radio-button element inside the container. Please give it a proper text that is bigger than 1 word.
  3. Open the page in a web browser.
  4. Reduce the size of the browser and observe that the paper-radio-button label is rendered outside of the containing div.

Browsers Affected

All browsers are affected. It is a browser independent issue.

@tmpduarte
Copy link
Author

tmpduarte commented Feb 15, 2017

I think the following solution for the issue might work: which is setting the width of the label to the following:
#radioLabel { width: calc(100% - var(--calculated-paper-radio-button-size, 16px) - var(--paper-radio-button-label-spacing, 10px)); }

According to the Pull Request guidelines only pull requests with tests will be considered. In a case like this, in which a visual 'glitch' is present is it necessary/possible to unit test the issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant