NicEdit in Hidden Div is resized small

Thomas picture Thomas · Jul 28, 2012 · Viewed 7.7k times · Source

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?

Answer

Hans Kerkhof picture Hans Kerkhof · Aug 17, 2012

In my case this worked with jquery:

new nicEditor().panelInstance('myArea');

$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('100%');

Or to absolute witdh:

$('.nicEdit-panelContain').parent().width('400px');
$('.nicEdit-panelContain').parent().next().width('400px');