javascriptjqueryhtmlnicedit

NicEdit in Hidden Div is resized small

I am trying to use the NicEdit editor for a textarea hidden in a div. When the user clicks a button, the targeted textarea's parent div is revealed. The width of the textarea is set to 100% of the parent div. The problem is that the parent div is hidden so the textrea has no width before the parent div is revealed. If I try to attach the NicEdit editor at the same time as revealing it's parent div, the editor appears tiny. 

<script type="text/javascript">

function add_task_editor() {
        new nicEditor({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript','ul','link']}).panelInstance('task_description');
    };

$('#trigger_it').click(function (e) {
 $('#parent_div').show();
 add_task_editor();

});
</script>
<div id="parent_div" style="display: none;">
<textarea id="task_description"></textarea>
</div>

Is there a way to fix this so that the editor's width is set to 100% of the parent div after it is loaded?

Solution

  • Of course, basically after the editor is created, inspect it to find it's ID or a class it has, and set it's width $('#editorsID').width('100%'); for example.

    Or maybe find it's parent div's width in pixels and set it to that.