Skip to content

Select enhancement - enable width options#1776

Open
frankieroberto wants to merge 1 commit intoselect-enhancementsfrom
select-enhancements-width-options
Open

Select enhancement - enable width options#1776
frankieroberto wants to merge 1 commit intoselect-enhancementsfrom
select-enhancements-width-options

Conversation

@frankieroberto
Copy link
Contributor

This is a quick experiment to enhance #1700 by also allowing some custom widths to be set.

Right now the select is always intrinsically sized based on content, but in #1700 it always has width: 100%.

I suspect there will remain a need to have smaller sizes.

The code in this PR lets you set classes: 'nhsuk-select--width-20', and then that class is copied to the wrapper class with javascript and transformed into nhsuk-select-wrapper--width-20.

This would mean that the width would apply to both no-js and the js-enhanced versions.

Currently I’ve only added 10, 20 and 30 size classes, rather than all the ones input supports.

This allows the width to be set on selects, which would then also be used on the javascript-enhanced selects.
@colinrotherham colinrotherham temporarily deployed to nhsuk-frontend-pr-1776 January 16, 2026 18:11 Inactive
@sonarqubecloud
Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
71.4% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

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

Successfully merging this pull request may close these issues.

2 participants