Multiple field height auto

Forms SharePoint 2019
1

Hello, I have a multiple field. How to make auto increase height when multiple text there is ? without scroll in window.
image

2

I try this code in this article, but have an error
image
It doesn't work for SharePoint 2019 onprem? only online?

3

i tried this css

.fd-form textarea.form-control {
    height: 500px;
	}

It works, auto height doesn't work ....

4

Hello @ixxxl,

The code from the post that you've shared works only for the plain text field.

For the rich text you can try out the code from this post:

1 Like
5

@mnikitina
image
I tiried with plain text first code and get error with $refs undefined
An your code with rich text, -another errror

6

@mnikitina
I reopened form, published it again and now it works perfect!! Thank you!

7

@mnikitina

image
image1327×169 12.7 KB

But on plaint text doesn't work ... with this code

fd.spRendered(function() {
var textArea = fd.field('{FieldInternalName}').$refs.textarea;
function recalcHeight() {
    textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
}
recalcHeight();
$(textArea).keyup(recalcHeight);
});

PS. I found a mistake in my code in field name {} - i delete just this and all works, thanks!

8

@mnikitina
Good day ,
Why on load form field height is not setting auto ? only on change..
The code write in console that it is proceed, but doesn't increase height..
@Nikita_Kurguzov
What i made wrong ?

9

Dear @ixxxl,
Can't say what's wrong. Can you export the form for us?

10

@Nikita_Kurguzov Eleme222nt_Edit.xfds (68.0 KB)

11

Dear @ixxxl,
Not sure, everything looks correct, but you can try to test it like this and see what results you get:

function recalcHeight(fieldName) {
    console.log('Scroll height: ' + textArea.scrollHeight);
    console.log('Client height: ' + textArea.clientHeight);
    if(textArea.scrollHeight > textArea.clientHeight){
        textArea.style.height =  (textArea.scrollHeight) + "px";
    }
    else{
        textArea.style.height = "150px";
    }
    console.log('Text area height: ' + textArea.style.height);
}
12

@Nikita_Kurguzov

image
image1411×157 5.66 KB

the same as it was on load..

fd.spRendered(function () {
function recalcHeight(fieldName) {
    var textArea = fd.field('Relatare_x0020_adresare').$refs.textarea;
    console.log('Scroll height: ' + textArea.scrollHeight);
    console.log('Client height: ' + textArea.clientHeight);
    if(textArea.scrollHeight > textArea.clientHeight){
        textArea.style.height =  (textArea.scrollHeight) + "px";
    }
    else{
        textArea.style.height = "150px";
    }
    console.log('Text area height: ' + textArea.style.height);
}
recalcHeight()
})
13

Dear @ixxxl,
Try adding a small delay, it might need some time:

fd.spRendered(function () {
 var textArea = fd.field('{FieldInternalName}').$refs.textarea;
 function recalcHeight() {
    console.log('Scroll height: ' + textArea.scrollHeight);
    console.log('Client height: ' + textArea.clientHeight);
    if(textArea.scrollHeight > textArea.clientHeight){
        textArea.style.height =  (textArea.scrollHeight) + "px";
    }
    else{
        textArea.style.height = "150px";
    }
    console.log('Text area height: ' + textArea.style.height);
  }
  setTimeout(recalcHeight, 2000);
  $(textArea).keyup(recalcHeight);
});
1 Like
14

@Nikita_Kurguzov
Thank you !! Now it works !!