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

Change <label> styles #561

Open rothenburycam opened 8 years ago

rothenburycam commented 8 years ago

Could the styles please be changed from display:inline-block to display:block? It makes elements below (particularly notes created by the CMS form builder) float up against it in desktop and mobile view. Screenshots attached.

@media screen and (min-width: 769px) .uomcontent fieldset label { width: 412px; width: 25.75rem; display: inline-block; }

screen shot 2016-03-08 at 9 40 04 am screen shot 2016-03-08 at 9 39 56 am screen shot 2016-03-08 at 9 39 01 am screen shot 2016-03-08 at 9 38 12 am
waitingallday commented 8 years ago

This markup was very strongly tied to how the form was designed, we're midway through a piece of work to undo a lot of this and allow default form controls - I'll make sure this is included along with it.

rothenburycam commented 8 years ago

It would be good to look at the default way that CMS builds forms and work around this, if possible. Alternatively, if we could get @yevek or @tomstringer to submit a change request to Squiz to change form structure to match what the design system is expecting. I'm having to hardcode a few forms to make them readable - it would be great if there was no customisation required! :)

axelboc commented 8 years ago

Eventually, you'll just need to wrap your form in an element with a specific class (maybe matrix-form) and that will style all the children appropriately.

axelboc commented 8 years ago

Postponing this to v5, as discussed, with the aim to get it done asap.