Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

[2012-02-29] More fluid layout for CMS form input elements #343

Open
silverstripe-issues opened this Issue · 1 comment

2 participants

@silverstripe-issues

created by: @chillu (ischommer)
created at: 2012-02-29
original ticket: http://open.silverstripe.org/ticket/6871


Currently, form elements in the CMS are set to "width: 100%; max-width: 512px".
Because the width in this case applies to the whole form width (as no containing element overrides it),
the max-width of 512px always applies. Including the label space of ~180px, this
makes for a minimum form width of around 700px - much larger than necessary for most fields.
This is particularly a problem in smaller forms such as the file info on uploaded fields (in UploadField).

  • Find a way to have fields shrink to widths around 500px (any lower is not a requirement)
  • Investigate "display: table" for this purpose (IE8+ only, so needs some basic IE7 fallbacks)
  • Ensure labels still float correctly into multiple lines
  • Ensure it works with "full-width" fields that don't have labels
  • Ensure it works with more complex fields like chosen.js dropdowns
  • Ensure it works with "form.small" and "form.stacked" styles (see _form.scss)
  • Bonus points for having the ".stacked" form styles automatically apply for widths lower than 500px

Use the https://github.com/silverstripe-labs/silverstripe-frameworktest module to ensure all combinations of fields work correctly with any style changes.

Remember: The goal is to make field styles easier to customize (e.g. indent+nest field groups visually),
not to add a big pile of CSS to make it pixel perfect. Ideally we end up with less CSS than we have at the moment.

@silverstripe-issues

comment by: @chillu (ischommer)
created at: 2012-06-10


Moving out of milestone, not important (enough) until we want to do side-by-side previews.

@simonwelsh simonwelsh added the 3.1 label
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.