Will there be future support for specific/complex fields in the new form designer?

For example, the designer seems to apply input widths to the general form input css, and doesn't differentiate between different types of inputs. Thus the css gets applied to other inputs that don't need to be as large or small.  

I've attached a screen shot of a time range on my form, where the individual dropdown of the time hours/minutes is too large, matching the size of regular text inputs.  I tried added css to those specific fields, and unfortunately they have the same class/id of other fields.

I love the idea of the new designer, but little things like this make it difficult to use!

To edit the CSS of each individual field ID# in the CSS editor of the Form Designer, double-click on the field so that the CSS editor will automatically point to that field ID#.

See image below (click to enlarge)

in this example, the width of the specific element was edited.

Hope this answers your inquiry. Let us know if there is more we can assist you with.

Thanks.

That helps! thanks, but it still has issues because the class .form-sub-level-container is already set, as well as .form-input. That why the dropdown icon is appearing out to the right of the field.  Essentially they need specific classes for the format to be correct.  

I guess I could go through the whole form and set widths for each element, but I'd be much easier if I only had to set it once for each type of field.

... but I'd be much easier if I only had to set it once for each type of field.

You can actually for each type of field... there is a class for each input type (dropdown, textbox,radio.. so on) Is this what you meant? 

 Example, if you use the browser inspector, you will see the class name

so it is the same with the Form Designer CSS Editor.. you will be able to use the input type class name for the specific field.

Thanks.

Not quite, because I may want a separate single drop down to have a width of 300px, and the times I would only want at 50px.  Although they are both dropdowns, they should be treated differently.

Hi tadie92, 

If you want to change a specific field's styles, you can use the ID to set the CSS styles. If you want to change a group of fields' styles,  you can use the Class Name to set the CSS styles. If you notice that you're CSS styles are not reflecting on your specific field, try to put !important on each CSS property. For more information, you can refer to this article.

Do let us know if you need further assistance.

Regards.

I get that, I guess I'm trying to understand why there isn't a different class applied to different types of fields and containers.  I can certainly apply style to each element's ID, but to do that over and over 40+ times is sorta defeating the purpose.

Maybe something to consider for future development?

Hi tadie92, 

Currently, there are different classes for different types of fields. For example,

time dropdown --> time-dropdown

textbox --> form-textbox

Do you mean you want that containers of different types of fields should have different classes as well? For example,

container of time dropdown --> should have class time-dropdown-container

container of textbox --> should have class textbox-container

Is this what you mean? I think our development team might consider this. Please confirm if you mean the same thing.

Regards

Yes, because otherwise you have unnecessary spacing as was seen in my second post.  In addition there is another container around the entire time range itself, which also inherits the field width set in the designer.

Ultimately though it would be great if they could integrate that into the formatting options of the designer.

Thanks.

Absolutely, you are able to modify the all spacing, as for instance, the Date Time field can be customized every piece of elements:

.form-line.form-line-column.form-col-1 {
   
}

.form-textbox {
   
}
#month_1 {
   
}
#year_1 {
   
}
.form-sub-label {
   
}
.form-label.form-label-top {
   
}

Let us know if we can assist you further.