Add support for Responsive Layout to Field Editor

  • 5
  • Idea
  • Updated 2 years ago
  • Under Consideration
This idea stems from the conversation/analysis at https://community.skuid.com/skuid/topics/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!
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb

Posted 2 years ago

  • 5
Photo of Karen Waldschmitt

Karen Waldschmitt, Official Rep

  • 8,240 Points 5k badge 2x thumb
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
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
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. 
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,076 Points 10k badge 2x thumb
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%;
}