Question

CSS New Forms Designer

Forms

Updated October 26, 2022

asked on May 5, 2021

Hello,

Working with the new forms designer old CSS scripts which were frequently used no longer work. Wondering if anyone has been able to update the CSS for the new form as I have been unable to locate the required syntax when inspecting the page.

This makes the background static and the form scrolls separately from the background.

This one really feels like it should be part of the template configuration and could be very easily added to the settings.

/*This is useful when using pictures for a background*/
body {
  background-repeat: no-repeat; 
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

Read-Only Fields no longer show up as grey and are white by default which makes them confusing for most general users the script below should help with that but does not work either.

Options on the theme editor on what required, read-only fields should look like would be great if we are trying to make theming less dependant on CSS.

/*This makes the background for read-only fields gray instead of white*/
.cf-formwrap input[readonly]{background-color:#e0e0e0!important;border:0px;}
.cf-formwrap select[readonly]{background-color:#e0e0e0!important;border:0px;}
.cf-formwrap textarea[readonly]{background-color:#e0e0e0!important;border:0px;}

1 0

Replies

replied on May 5, 2021

Try these

&.Form.lf-form {
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
}

input[readonly],
textarea[readonly],
.ng-select-disabled .ng-select-container {
  background-color: #e0e0e0!important;
  border: 0px;
}

2 0

replied on September 28, 2021

Thank you,

Do you know what it would be for the on-prem version with the new designer? The above code did not work.

2 0

replied on October 26, 2022

This is a nice workaround, the tasks look so much better when the read only portions of the form are clearly defined. But it does seem to have a visual effect on the canvas designer. Any CSS applied to read only fields for the tasks is randomly applied to fields on the designer too, which makes them look odd as the person is building the form.

0 0

replied on July 20, 2021

Glad I found this as I had the same question. I'm hoping there's a documentation update in the works for CSS customization on the new Forms designer. It looks like much of the existing CSS customization help documentation for Cloud is no longer valid for the new designer (which ends up being pretty confusing for end users).

2 0

You are not allowed to follow up in this post.

Question

Question

CSS New Forms Designer

Replies

Sign in to reply to this post.