jHtmlArea creates really small editing area

Question

I have a problem that I can't seem to figure out. I am using jHtmlArea 0.8 along with jQuery v3.2.1. I created a dialog with a TEXTAREA which I am using jHTMLArea to convert to an HTML editing area.

My problem is that the HTMLArea seems to be created but it doesn't really give me an editing area. I have searched to see if there is a way to control the height but, based on what I see in the source code, the height of the HTMLArea should match the size of the textarea. I have checked my css and I cannot find anything that might cause this.

I have posted a simplified version of the page online (all the custom code is inline) at http://issuesnj.com/sample/. Just click on the + button and you should see the issue. I would be grateful for any assistance on this.

The operative code here is the dialog HTML definition and the JavaScript. Here they are:

<div id="divEdit">
    <table>
        <tr>
            <td>Page Name</td>
            <td><input name="pageName" id="pageName" style="width:400px" type="text"></td>
        </tr>
        <tr>
            <td>Page Title (shows on the tab)</td>
            <td><input name="pageTitle" id="pageTitle" style="width:400px" type="text"></td>
        </tr>
        <tr>
            <td>Page Caption</td>
            <td><input name="pageCaption" id="pageCaption" style="width:400px" type="text"></td>
        </tr>
        <tr>
            <td>After upload URL</td>
            <td><input name="afterProcView" id="afterProcView" style="width:400px" type="text"></td>
        </tr>
        <tr>
            <td colspan="2"><br>Page Text:</td>
        </tr>
        <tr>
            <td colspan="2"><textarea name="pageText" id="pageText" rows="20" style="width: 700px;"></textarea></td>
        </tr>   
    </table>
</div>

Here's the javascript for the dialog and the fnAdd function which has the htmlarea call...

$(document).ready(function(){
    $("#divEdit").dialog({
        "autoOpen": false,
        "width": "auto",
        "title": "Page Settings",
        "open": function (evt, ui) {
            $("#pageText").htmlarea();
        },
        "buttons": 
        [
            {"text": "Save",
             "click": function(){$("#divEdit").dialog("close");}
            },
            {"text": "Cancel",
             "click": function(){$("#divEdit").dialog("close");}
            }
        ]
    });
});

function fnAdd(){
    $("#id").val("New");
    $("#pageName").val("");
    $("#pageTitle").val("");
    $("#pageCaption").val("");
    $("#pageText").htmlarea('html', '\b');
    $("#afterProcView").val("");
    $("#divEdit").dialog("open");
}

Thanks in advance!

Answer 1

OK. I have an answer to this one although I am left with a new question (which I guess I will post separately)...

The problem was that I only htmlarea() once (during the edit). I needed to initialize the htmlarea in the document ready function. So, the modified code would look like this:

$(document).ready(function(){
    $("#pageText").htmlarea();

    $("#divEdit").dialog({
        "autoOpen": false,
        "width": "auto",
        "title": "Page Settings",
        "open": function (evt, ui) {
            $("#pageText").htmlarea();
        },
        "buttons": 
        [
            {"text": "Save",
             "click": function(){$("#divEdit").dialog("close");}
            },
            {"text": "Cancel",
             "click": function(){$("#divEdit").dialog("close");}
            }
        ]
    });
});

Once I added that generic htmlalrea call, it sized properly. As for the rest, that will be the subject of another question.

Answer 2

Upon Inspecting the code, notice <iframe style="height: 0px; width: 700px;"></iframe>. Change the height to whatever you want and it should work. If you are working with jQuery, that is fixable as well by specifying a CSS rule. iIf you can post some code, we can fork around with it.