Acceptable Defaults: Form Inline Styles

0 Likes

Acceptable Defaults: Form Inline Styles

The current default "new form" experience is pre-populated with fields which have an "unset" or "empty" value for the Label Width and Field Width inputs (below, top). When the form renders in the Preview Draft mode, the label and field are both modified with an inline width style (100px and 150px respectively) although the input is empty by default (below, bottom).

 

Field width setting is empty by defaultField width setting is empty by default

 

Label and field width are set as an inline styles by default (when empty)Label and field width are set as an inline styles by default (when empty)

 

I'd at least expect the default values for the Label Width (100px) and Field Width (150px) to be preset to the values that populate by default so that there's some clue as to the relationship between the input and the output. 

Given that the input is empty, it'd be great to extend/refactor the script to consider an "empty" value as a way of not setting an inline width [attribute] on an element (which generally these days is preferred for responsive design).  Better yet would be to remove the "px" appended to the value in the input (Label/Field Width) so that "400" outputs "400px" and rather take the exact value of the input to extend the functionality to other units (400%, 400em, 400px). 

 

This issue is not limited to just the Label Width and Input Width properties, you'll also notice on the top line of the bottom image (above) an inline style ending in "...; width: 271px;". This is the bottom line of the form element with a width of 271px. This value is not set in the form editor and rather it's implied - presumably as a total of other implied values like the width of the labels and inputs. Adding an input to actually set the width of the form on the user-end would be better than implying the width and creating a need for an "override solution" in the default context.

 

Most often, this issue is solved with CSS by overriding the ".mktoHasWidth" class with a setting of "width:auto !important;" to override the inline styles -or- with JS by removing the style="" attribute from all the form elements (the nuclear option). At very least, it'd be an improvement to not add an inline style by default unless there is an explicit value in one of the Form Editor inputs (like Label Width, Field Width, etc). Alternately, it'd be great to add more inputs to the form editor experience so that the things that are added as inline styles are "open" to be changed similarly to the field width and height (ex. columns have a default margin-bottom of 10px) which works at the issue the other way around without changing the defaults.

 

PROPOSED: 

 

Update forms2.js to interpret empty values in the forms editor as empty values and do not set inline styles for any elements which are not explicitly entered into an input. 
     

Update forms2.js to accept a "value + unit" combo (100%, 30em, 400px) rather than just a number appended with "px" for any width-related inputs (including Max Length). 

         

Add similar inputs (value + unit) into the Form Editor to create user controls for anything that's added as an inline style on any element (ex. margin-bottom on columns, width on inputs, labels and spacers). This would at very least expose the defaults and allow things to be zeroed-out (margin-bottom: 0px) or even better, emptied and then omitted as an inline style all-together.