change textarea height

fc338339

I try to add attr for the textarea in order to change the height, however the textarea is still unchaged, Please tell me where I did wrong, thank.

{
label:  "Remark:",
name:   "m.remark",
type:   "textarea",
attr: {
  class: "form-control",
  rows: "10",
  cols: "40",
  length : "280",
  height: "400"
  }
},

In order to get the textarea height shorter as what I need, I can only apply css at the at top of the javascript as below. It works but I not sure if it is the good method or I should apply a wrong attr at editor

<style>
    div.DTE_Field_Type_textarea textarea {
        height: 40px !important;
    }
</style>

allan

Using CSS is the correct way to do this. Editor's built in CSS uses:

div.DTE_Field_Type_textarea textarea {
    padding: 3px;
    width: 100%;
    height: 80px;
}

Which will override any setting you make in the attr options.

Allan

kct3937

IS there a way that I can set the textarea to wrap and to expand to suit the input?

allan

The text inside the textarea should wrap automatically if that is what you mean.

For the resizing of the text area, that isn't something that Editor offers built in, but it could easily be done as demonstrated in this SO post. Use field().input() to get the textarea element.

Allan

jaeweb

I know, it's an old one, but maybe this helps someone:

editorFirma.on( 'open', function () {
    // Resize Textareas on open
    $("textarea").each( function( i, el ) {
        $(el).height(20);
        $(el).height( el.scrollHeight );
    });
    // Resize Textareas on keyup
    $("textarea").keyup(function () {
        $('#'+this.id).height(20); 
        $('#'+this.id).height($('#'+this.id).prop('scrollHeight'));
    });
} );