We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
When using inline small radios the text can wrap:
I think this is due to max-width: calc(100% - 74px) on .govuk-radios__label, it needs to be adjusted down a bit for small radios.
max-width: calc(100% - 74px)
.govuk-radios__label
govuk-radios--inline
govuk-radios--small
<div class="govuk-radios govuk-radios--inline govuk-radios--small"> <div class="govuk-radios__item"> <input class="govuk-radios__input" id="sortControlsForm-sortBy-newest" name="sortBy" type="radio" value="newest"> <label class="govuk-label govuk-radios__label" for="sortControlsForm-sortBy-newest">Newest</label> </div> <div class="govuk-radios__item"> <input class="govuk-radios__input" id="sortControlsForm-sortBy-title" name="sortBy" type="radio" value="title"> <label class="govuk-label govuk-radios__label" for="sortControlsForm-sortBy-title">A to Z</label> </div> </div>
The text wraps when there are multiple words.
It shouldn't wrap unless the container constrains the space.
The text was updated successfully, but these errors were encountered:
No branches or pull requests
Description of the issue
When using inline small radios the text can wrap:
I think this is due to
max-width: calc(100% - 74px)
on.govuk-radios__label
, it needs to be adjusted down a bit for small radios.Steps to reproduce the issue
govuk-radios--inline
govuk-radios--small
classes to a radio group:Actual vs expected behaviour
The text wraps when there are multiple words.
It shouldn't wrap unless the container constrains the space.
Environment (where applicable)
The text was updated successfully, but these errors were encountered: