Add support for Responsive Layout to Field Editor

This idea stems from the conversation/analysis at https://community.skuid.com/t/columnset-rendering-issues-as-of-8-15-1-which-contained-sku…

Field Editors currently are “hardcoded” to a 40%/60% split of the label/value columns.  This presents several issues including primarily that it is difficult (nearly impossible) to provide a fully responsive layout of the label & value columns.  The percentages can be overridden with CSS rules but given the way the HTML is emitted, you’re forced to having “fixed” widths using % or pixels, etc.

Would like to see Field Editors enhanced to support full Responsive capabilities.  This could be accomplished in the following manner:

1) Expose a property for label column and value column
2) For each property, provide a “Fixed Width”, “Fit to Content” and “Flexible Width” option
3) Default the Label column to fixed 40% and Value column to fixed 60% for backwards compat

The behavior would behave the same way that a Responsive Grid with two columns would behave.

Thanks!

Barry~

Thanks for putting this as a new post. If you’d like to see this, please vote it up so the developers can take that into consideration when they evaluate this idea for a future release. 

Thanks!
Karen

Great idea! At the least maybe someone could post a sheet of CSS hacks to adjust these things, I always find myself digging through the Inspector in my browser to figure out which divs to adjust, and often giving up when I can’t seem to quite isolate the right thing. 

Hi Jack - Here’s a sample CSS that should cover adjusting the label and value columns of a Column in a field editor. I chose to apply this at the Column level within a Field Editor instead of on the entire field editor so that columns within a field editor could have different widths. You can adjust the percentages however you would like. In my case, I have a stock set of rules (editorleftcol10, editorlefcol15, editorleftcol20, etc.) that cover various percentage breakdowns. To use the below, just add the class to the Column of the field editor that you want the new width applied to. .editorleftcol10 .nx-basicfieldeditor-item-label { width: 10%; } .editorleftcol10 div.nx-basicfieldeditor-section-body > div.nx-basicfieldeditor-item > .nx-field, .editorleftcol10 div.nx-basicfieldeditor-item > .nx-field { width: 90%; }