Unable to scroll on a disabled field

Forms SharePoint 2019
1

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.

image
image1174×209 8.94 KB

Best regards
Corinna

2

Hello,

Have you tried setting the field to "Read-Only" in the field properties pane on the right hand side of the designer?

3

Saldy its the same behaviour and we don´t like the look of this.

image
image1147×133 9.46 KB

4

Perhaps @Nikita_Kurguzov or @Margo can support with this problem!

5

Hello @Sternchen,

You can enable scrolling for disabled fields using the CSS:

.fd-form textarea[disabled]{
  pointer-events: initial;
}
1 Like
6

That worked. Thank you:)

1 Like
7

One more quick question.
Is there a way that the field dynamically adjusts to the size?

8

@Sternchen,

You are welcome!

Do you mean adjust input height to the text? If so, please see this post:

9

With the code it now looks like this.
image

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

10

@Sternchen,

"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();
11

I tried this code and the textarea now looks like this.
image

12

@Sternchen,

Are you changing the text of this field dynamically? If so, you need to add this code inside the function that changes field value.

13

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

14

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: [] };
    }
}
15

Thanks Nikita,
it partially worked but the scrollbar is not working and i can't select del text inside the control.

16

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.

17

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.

18

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;
});