Display vs Edit field sizes

Forms
1

I have a form using grids and when i show the data using the display mode, the size of the fields dynamically changes to the size of the data in the fields. This is Great!

but, when i hit Edit the fields go back to uniform size and you either have to expand the box manually or use the scroll bar to see all the data. any way to get the fields to show all the data in edit mode just like display mode? here are the examples...

Display mode:

image
image.png1472×734 42.5 KB

Same Screen edit mode:

image
image.png1464×261 12.3 KB

2

Hello @eweiler,

The case here is in the Plain text height. You can adjust the height of the input to the content using this code:

fd.spRendered(function() {
    //Replace FieldName with the internal name of the field
    var textArea = fd.field('FieldName ').$refs.textarea;
    function recalcHeight() {
        textArea.style.height = (textArea.scrollHeight > textArea.clientHeight) ? (textArea.scrollHeight) + "px" : "120px";
    }
    recalcHeight();
    $(textArea).keyup(recalcHeight);
});

Note, that this code works for Plain Text fields only.

3

Thanks, where do you place this code?

4

@eweiler,

You need to add this code to JavaScript Editor:
image

5

Thank you for your help!

1 Like
6

Is there any way to get like functionality with rich text fields?

7

Hello @eweiler,

You can use this code to adjust the height of the rich text input to the content.

fd.spRendered(function() {    
    //Replace RichText with the internal name of the field
    fd.field('RichText').ready().then(function(field) {
        var editor = $(field.$el).find('.k-editor');        
        function recalcHeight() {
        	var actualHeight = Math.round(editor.height());
        	var conetntHeight = field.widget.document.body.scrollHeight;
        	var newHeight = (conetntHeight > actualHeight) ? conetntHeight + 100 : actualHeight;
            editor.height(newHeight);
            }
        recalcHeight();
        setInterval(function(){ recalcHeight(); }, 1000);
       
    });
});
8

Thanks, you folks are great!!’

1 Like
9

@mnikitina the code for plain text doesn't appear to be working anymore.

Anyone know why?

10

Hello @eweiler,

The code for plain text field works on my side.

Please share the code that you are using.
Are you getting any errors in browser console (F12)?

11

I fixed it

I had some stupid extra code that screwed it up.

Thanks for your response

1 Like