Thomas Thomas - 4 months ago 23
jQuery Question

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?

Answer

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.