Add support for Responsive Layout to Field Editor

Barry SchnellBarry Schnell 💎💎
edited January 12, 2018 in Ideas
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!
5
5 votes

Under Consideration · Last Updated

Comments

  • Karen WaldschmittKaren Waldschmitt 🛠️ 
    edited March 2, 2017
    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
  • Jack SanfordJack Sanford San Antonio, TX 💎💎
    edited January 12, 2018
    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. 
  • Barry SchnellBarry Schnell 💎💎
    edited November 18, 2016
    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%; }
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!