CSS style of empty fields on Display form

Forms SharePoint Online
1

Hi.
I need the help of the amazing Plumsail team once more.

I am trying to hide (or set specific style) for empty fields on my display form.
The empty fields are not always the same as the form doesn't have many mandatory fields.
All are standard sharepoint fields.
I have custom CSS styling applied to the form and when the field is empty, it creates an empty shrunken "noodle" field on the display form as in the screenshot.
I need to either hide the "noodle" and keep the title, or style dynamically all empty fields so they blend with background color.
Any help would be appreciated, as always! Thanks

Screenshot 2024-03-11 234914
Screenshot 2024-03-11 2349141371×418 25.9 KB

My CSS for the display form

.fd-field-control {
    border-color: #6c6cff !important; 
    border-radius: 10px !important;
    border: 1px solid;
    padding-right: calc(var(--fd-gutter-x)*.5);
    padding-left: calc(var(--fd-gutter-x)*.5);
    background-color: #f4f0ec; /*Grey to mark fields as read-only*/
    font-weight: 500;
}

/* FIXES MISALIGNED TEXT IN VERTICALLY ALIGNED FIELDS*/
.fd-form .fd-field-control:not(.col-sm)>.col-form-label {
    padding-top: calc(0.2rem + 1px);
}

.zero-background .fd-field-control{
  border: none;
  background-color: transparent;
  
}

.my-highlight-recommendation {
    border:3px solid;
    border-color: #6c6cff !important;
    border-radius: 10px;
    background-color: #f9ffe3;
}
2

Hello @HypnoToad,

You can try it like so:

.fd-field-control > div:not(:empty) {
    border-color: #6c6cff !important; 
    border-radius: 10px !important;
    border: 1px solid;
    padding-right: calc(var(--fd-gutter-x)*.5);
    padding-left: calc(var(--fd-gutter-x)*.5);
    background-color: #f4f0ec; /*Grey to mark fields as read-only*/
    font-weight: 500;
}
3

Worked like a charm! Thank you so much!

You guys are truly amazing!

1 Like