Resize jHtml text area

Question

I would like to resize jHtml TextArea just like normal text area , so is there any way for resizing.

Following is the code for creating jHtml Textarea.

Here is the HTML code:

<table style="width: 100%; border-collapse: separate !important; border-spacing: 2px!important">
<tr>
    <td>
        <%=Html.LabelFor(m => m.Description)%>
    </td>
    <td>
        <%=Html.TextAreaFor(m => m.Description, new { @class="form-control",style="width: 610px; height: 150px" })%>
    </td>
</tr>
</table>

and below is the javascript code :

<script type="text/javascript">
   $(function () {
    $("#Description").htmlarea({
        // Override/Specify the Toolbar buttons to show
        toolbar: [
            ["bold", "italic", "underline", "|", "forecolor"],
             ["p", "h3", "h4", "h5", "h6"],
              ["link", "unlink", "|", "image"],
              ["orderedlist", "unorderedlist"],
              ["increasefontsize", "decreasefontsize"],
              ["indent", "outdent"],
              ["justifyleft", "justifycenter", "justifyright"],
              ["cut", "copy", "paste"]
        ]
    });
});
</script>

score 3 · Accepted Answer · answered Feb 10 '16 at 11:21

you can achieve the behaviour by adding the "resizable" attribute of jHtmlarea. May it help you out.

<script type="text/javascript">
   $(function () {
     $("#Description").htmlarea({           
          toolbar: [
             ["bold", "italic", "underline", "|", "forecolor"],
             ["p", "h3", "h4", "h5", "h6"],
             ["link", "unlink", "|", "image"],
             ["orderedlist", "unorderedlist"],
             ["increasefontsize", "decreasefontsize"],
             ["indent", "outdent"],
             ["justifyleft", "justifycenter", "justifyright"],
             ["cut", "copy", "paste"]
         ]
     }).parent().resizable({ alsoResize: $("#comm").find('iframe') });
  });
</script>

score 1 · Answer 2 · answered Feb 10 '16 at 10:25

1

My guess is that you can easily achieve desired behaviour by using css rules as in code snippet below:

#Comments {
    position:absolute;
    width:60%;
    height:200px;
}

<textarea id="Comments">My text.</textarea>

answered Feb 10 '16 at 10:25

Andriy Ivaneyko

20,639
6
60
82

1

Hey ,Thanks for the answer but its not normal text area. its jHtmlarea and i have already tried this one. Not working. – ifour Feb 10 '16 at 10:33
Yes, but position of htmlarea can be adjusted by css...in place of textarea can be any other element, it would be greate if add some html layout.. – Andriy Ivaneyko Feb 10 '16 at 10:55

Resize jHtml text area

2 Answers2