search

unimelb / unimelb-design-system

A complete design system for the University of Melbourne
https://web.unimelb.edu.au
30 stars 12 forks source link

Select/Dropdown form component field width #900

Open rhyslawry opened 7 years ago

rhyslawry commented 7 years ago

Expected behaviour

The Select ("Dropdown") form component should match the width of other input fields for consistency

Actual behaviour

Currently the Select component field width does not match the other components/input types, usually displaying much wider than the rest of the input fields Its width is set to 100%, while all other input fields (except file upload fields) have a width of 25rem This should apply to both the default and alt styles of select.

Steps to reproduce

http://discover.fvas.unimelb.edu.au/ask image

https://resources.web.unimelb.edu.au/controlled-environment/help-guides/using-forms/default-form image

https://web.unimelb.edu.au/components/forms/ image

Suggested solution

Add width: 25rem; to .uomcontent fieldset .styled-select { } to match other input fields

Before

image

After

image

rhyslawry commented 7 years ago

Side note: File upload fields also have 100% width instead of 25rem image