CSS Targeting Cell Borders

[shedev]

I am so close, but a fine gray line that looks like a border is haunting me. Can I get rid of these for editable fields? The fields without this gray line are Read-only and work just fine. I feel like it is a box element but not sure.

I have added Javascript to assist in forcing the boxes to all be free of borders. Ignore the green boxes and one obvious white box area - I masked some private information. I will add more detail later but wanted to get this out to the community.

fd.spRendered(function(){
	$(fd.field('roStage').$el).find('input').css('background-color','#ffdac5');
});

Thank you, as always.

[Nikita_Kurguzov]

Dear @shedev,
You can try adding the following to the CSS editor:

.fd-form .k-autocomplete, .fd-form .k-dateinput-wrap, .fd-form .k-dropdown-wrap, .fd-form .k-picker-wrap, .fd-form .k-multiselect-wrap, .fd-form .k-numeric-wrap, .fd-form .k-editor, .fd-form .k-upload, .fd-form .form-control.k-widget:not(.k-autocomplete), .fd-form .form-control{
    border-width: 0px!important;
    border: 0!important;
}

[shedev]

Thank you, @Nikita_Kurguzov. This only happens to fields that are editable. I have trouble trying to write to read-only fields and that is why I need to keep them open. Seems silly - like I am making it more difficult than it needs to be; I have many of these "Read-only" fields for user viewing purposes.

In my case, we use a hidden accordion seen only by staff administrators. Sometimes staff needs to change some field values in the form, but the end user (non-administrator) also needs to see the updated value but should NOT change it. To accomplish this I do the following.

//Read-only view

fd.spRendered(function() {

    fd.field('AdminSharePointField').$on('change', function() {
        fd.control('HiddenPlumsailControlField').text = fd.field('AdminSharePointField').value.LookupValue;
        fd.field('UserSharePointField').value = fd.control('HiddenPlumsailControlField').text;

    });
    
});

This results in the ghost border I am trying to hide. Essentially, I am making the **UserSharePointField** *appear* hidden, but the user could just as easily change that field if they clicked in the field and discovered it wasn't locked/Read-only. Do you have a better way of forcing Read-only fields to accept new values?

[Nikita_Kurguzov]

Dear @shedev,
There are ways to include just the field value as well, for example, in the Text control in square brackets - Plain Text — SharePoint forms

Though that's not dynamic, but text can be changed with JavaScript.

You can set fields as disabled and not Readonly, it's set with JavaScript, and it can be adjusted:

fd.field('Field1').disabled = true;

[shedev]

Coming back to this, I will mark this as solved because it does a great job of targeting almost all (but not accordions) borders and essentially making them invisible across the entire form.

.fd-form .k-autocomplete, .fd-form .k-dateinput-wrap, .fd-form .k-dropdown-wrap, .fd-form .k-picker-wrap, .fd-form .k-multiselect-wrap, .fd-form .k-numeric-wrap, .fd-form .k-editor, .fd-form .k-upload, .fd-form .form-control.k-widget:not(.k-autocomplete), .fd-form .form-control{
    border-width: 0px!important;
    border: 0!important;
}

For those who want to target specific fields v. the near-global result above, try adding this CSS:

 /* ////>>>>>>>>>>>>>>  Only defined fields have borders invisible */

/* Only affect fields whose container has .custom-no-border */
.fd-form .custom-no-border .k-autocomplete,
.fd-form .custom-no-border .k-dateinput-wrap,
.fd-form .custom-no-border .k-dropdown-wrap,
.fd-form .custom-no-border .k-picker-wrap,
.fd-form .custom-no-border .k-multiselect-wrap,
.fd-form .custom-no-border .k-numeric-wrap,
.fd-form .custom-no-border .k-editor,
.fd-form .custom-no-border .k-upload,
.fd-form .custom-no-border .form-control.k-widget:not(.k-autocomplete),
.fd-form .custom-no-border .form-control,
.fd-form .custom-no-border .k-input,
.fd-form .custom-no-border .k-input-inner {
  border: 0 !important;
  box-shadow: none !important; /* kills focus/hover outlines in modern themes */
}

/* Make sure hover/focus doesn’t bring borders back */
.fd-form .custom-no-border .k-autocomplete:hover,
.fd-form .custom-no-border .k-dateinput-wrap:hover,
.fd-form .custom-no-border .k-dropdown-wrap:hover,
.fd-form .custom-no-border .k-picker-wrap:hover,
.fd-form .custom-no-border .k-multiselect-wrap:hover,
.fd-form .custom-no-border .k-numeric-wrap:hover,
.fd-form .custom-no-border .form-control:hover,
.fd-form .custom-no-border .k-autocomplete.k-focus,
.fd-form .custom-no-border .k-dateinput-wrap.k-focus,
.fd-form .custom-no-border .k-dropdown-wrap.k-focus,
.fd-form .custom-no-border .k-picker-wrap.k-focus,
.fd-form .custom-no-border .k-multiselect-wrap.k-focus,
.fd-form .custom-no-border .k-numeric-wrap.k-focus,
.fd-form .custom-no-border .form-control:focus {
  border: 0 !important;
  box-shadow: none !important;
}

/* If your Kendo theme exposes CSS vars for borders, zero those out locally */
.fd-form .custom-no-border {
  --kendo-component-border-width: 0;
  --kendo-input-border-width: 0;
}

 

Then apply custom-no-border to the GENERAL Class, like so in Plumsail Designer: