Hello,
Is it possible to make a disabled field scrollable?
The users are only allowed to read the field, but not to write in it. Which is why it is disabled. However, this prevents them from reading the complete text there.
It doesn't matter how many columns I entered in the SP before. Only these 2 are displayed.
For now it looks like this.
Best regards
Corinna
Hello,
Have you tried setting the field to "Read-Only" in the field properties pane on the right hand side of the designer?
Perhaps @Nikita_Kurguzov or @Margo can support with this problem!
Hello @Sternchen,
You can enable scrolling for disabled fields using the CSS:
.fd-form textarea[disabled]{
pointer-events: initial;
}That worked. Thank you:)
One more quick question.
Is there a way that the field dynamically adjusts to the size?
You are welcome!
Do you mean adjust input height to the text? If so, please see this post:
With the code it now looks like this.
However, it should adapt dynamically to the length of the field.
Here is the code I tried.
var textArea = fd.field('Name').$refs.textarea;
function recalcHeight() {
textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
}
recalcHeight();
$(textArea).keyup(recalcHeight);
Thank you for your help
"120px" in the code is the minimum height of the field. If you want the height of the field to always fit the content, try this code:
var textArea = fd.field('Text').$refs.textarea;
function recalcHeight() {
textArea.style.height = '10px'
textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight + 5) + "px" : (textArea.clientHeight + 5) + "px";
}
recalcHeight();I tried this code and the textarea now looks like this.
Are you changing the text of this field dynamically? If so, you need to add this code inside the function that changes field value.
Hi !
about the disabled field scrollable the code below looks like is not working for a multiline rtf SharePoint field, I'm using PlumSail From 3.8.0, can you help please?
regards
Dear @maurizio.fidanza,
It's not as easy with rich text, but you can try the following instead of setting it disabled:
fd.spRendered(function () {
checkIFrame();
});
function checkIFrame() {
if($(fd.field('RichText').$el).find('iframe').length == 0) {
window.setTimeout(checkIFrame, 100); /* this checks the iframe every 100 milliseconds*/
} else {
$(fd.field('RichText').$el).find('iframe').attr('style', 'pointer-events: none;');
fd.field('RichText').widgetOptions = { tools: [] };
}
}
Thanks Nikita,
it partially worked but the scrollbar is not working and i can't select del text inside the control.
Dear @maurizio.fidanza,
You're not setting field as disabled at the same time, right? The scroll bar should be fully usable, but text might not be clickable as it simply prevents all events within the field.
Hi @Nikita_Kurguzov I'm not setting it as disabled.
I'll do some more test using a basic form without any code other the one you gave me and I'll let you know...
Thanks.
Dear @maurizio.fidanza,
You can also try the following CSS instead:
.fd-form .fd-sp-field-note .fd-editor-overlay {
margin-right: 15px;
}
This works with setting field to a disabled state:
fd.spRendered(() => {
fd.field('RichText').disabled = true;
});
Hi !
For both proposed solutions, the scrollbar works, but it's not possible to copy the text. Additionally, by using the tab control, user can access the field and modify the value.
At the moment, the only solution I have found is to use the Text control and insert the field name inside square brackets, unless you have a better way...
Thanks in advance!
Dear @maurizio.fidanza,
Honestly, sounds like a great solution! Indeed, even default disabling of rich text field doesn't allow it to be edited, but using Text control instead allows for a great workaround.
Here's info on how to use it for those not familiar with it - Text control — Plumsail SharePoint Forms Documentation