I've figured out a way to manipulate how specific field types are shown on the Portal. One issue that there's no good answer for is resizing fields of a certain type. I think this solves that.
You'll need to clone the SC Catalog Item widget for this to work. I've only gone through and added CSS that you can apply to variables. I haven't checked how this works on a Record Producer yet (feel free to post!).
I hit what I consider the most often used variables that you many want to apply some sort of CSS to (width, color, whatever I suppose). Some variables make no sense to apply CSS against.
You should be able to take all (or a piece) of this to apply against how your variable fields are shown on the Portal in the widget. If you take it as is, your forms will look like sheer madness (see pics below) but it will be obvious how the form was impacted and ties back to the CSS.
This is meant to give you a place to start for something like Date or Date/Time fields whose layout on the Portal is poor at best.
/*Multiline text:*/
textarea{
width: 75% !important;
background-color: yellow !important;
min-width: 200px;
}
/*Single line text:*/
input[name="single_line_text"]{
width: 35% !important;
background-color: red !important;
min-width: 200px;
}
/*Wide line text:*/
input[name="wide_single_line_text"]{
width: 90% !important;
background-color: black !important;
min-width: 200px;
}
/*Date or Date/Time:*/
div[ng-switch-when^="glide_date"]{
width: 25% !important;
min-width: 200px;
}
input[id*="date"]{
background-color: gray !important;
}
/*Choice (ie Select):*/
div[id="s2id_sp_formfield_choice_select_box"]{
width: 50% !important;
background-color: lime !important;
min-width: 200px;
}
/*Choice (ie Select), Yes/No:*/
div[id="s2id_sp_formfield_yes_no"]{
width: 40% !important;
background-color: chocolate !important;
min-width: 200px;
}
/*Reference*/
div[id="s2id_sp_formfield_reference"]{
width: 80% !important;
background-color: purple !important;
min-width: 200px;
}
/*List collector*/
ul[class="select2-choices"]{
background-color: pink !important;
min-width: 200px;
}
/*Duration*/
input[id*="dur"]{
background-color: cyan !important;
}
/*More work needed to align when width changed*/
/*input[id="dur_days_duration"]{
width: 100px !important;
}
input[id="dur-hours-duration"]{
width: 40px !important;
}
input[id="dur-minutes-duration"]{
width: 40px !important;
}*/
input[id="dur-seconds-duration"]{
width: 40px !important;
}
/*URL*/
input[id="sp_formfield_url"]{
background-color: darkseagreen !important;
}
/*Email*/
input[id="sp_formfield_email"]{
background-color: gold !important;
}
/*HTML*/
div[ng-switch-when="html"]{
/*only ajust width*/
width: 40% !important;
}
/*IP Address*/
input[id="sp_formfield_ip_address"]{
background-color: skyblue !important;
}
/*Labels above checkboxes*/
label[ng-if="::field.render_label"]{
font-weight: bold !important;
font-size: 16px !important;
}
/*Labels*/
label[ng-bind="f.label"]{
font-weight: bold !important;
font-size: 16px !important;
}
I encourage you to use Chrome's developer tools to find the most appropriate way to find fields when they are delivered via the widget, and comment (or correct it if I got something wrong).
My CSS should lead to what you'll see above.
Keep in mind that if you have variables within a Container using 2 columns, and you are using percent (%) for width, it will be that much smaller (twice as small) than if shown outside a container.
****
Edit 3/6/20
Here's the minimalist addition you can make while still staying mobile friendly (and no colors):
/*Single line text:*/
input[name="single_line_text"]{
max-width: 720px !important;
}
/*Date or Date/Time:*/
div[ng-switch-when^="glide_date"]{
width: 300px !important;
}
/*
input[id*="date"]{
background-color: gray !important;
}*/
/*Choice (ie Select), Yes/No:*/
div[id="s2id_sp_formfield_yes_no"]{
width: 100px !important;
}
/*Duration*/
input[id*="dur"]{
/*background-color: cyan !important;*/
}
/*More work needed to align when width changed*/
/*input[id="dur_days_duration"]{
width: 100px !important;
}
input[id="dur-hours-duration"]{
width: 40px !important;
}
input[id="dur-minutes-duration"]{
width: 40px !important;
}*/
input[id="dur-seconds-duration"]{
width: 40px !important;
}
/*IP Address*/
input[id="sp_formfield_ip_address"]{
width: 300px !important;
}
Edit (3/20/20) - Updated the CSS for Labels after further testing.
