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?
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');