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?

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?

• javascript
• jquery
• html
• nicedit

8 Answers 8

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

The answer by @Hans worked with me ... But I needed to add this as well to resize the div containing the text being edited (only the container around that div was being resized when not using the line below):

$('.nicEdit-main').width('100%');

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

Add "-2" to "width" if parent of textarea has prop "padding-left" or "padding-right".

This worked best for me:

new nicEditor().panelInstance('nic-me');
$('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next().width('98%');
$('.nicEdit-main').width('100%');

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.

This solve my case! Thanks

$(document).ready(function(){
        bkLib.onDomLoaded(function() {
        new nicEditor({fullPanel : true, maxHeight:100}).panelInstance('myArea');
        $('.nicEdit-panelContain').parent().width('100%');
        $('.nicEdit-panelContain').parent().next().width('98%');
        $('.nicEdit-main').width('100%');
        });
    });

for those who have the same problem, I optimized that and it looks completely normal:

$(document).ready(function(){
    bkLib.onDomLoaded(function() {
        new nicEditor({fullPanel : true}).panelInstance('myArea');
        $('.nicEdit-panelContain').parent().css({width:'100%', padding:"0"});
        $('.nicEdit-panelContain').parent().next().css({width:'100%', padding:"5px"});
        $('.nicEdit-main').css({width:'100%', padding:"0", minHeight:"80px"});
    });
});

After trying multiple stuff on the panel resize.. this worked for me..

bkLib.onDomLoaded(function() {
    new nicEditor().panelInstance('textarea_id');
    document.querySelector('div[unselectable="on"]').setAttribute('style', '');
});

basically just removing the default width being set by nicEdit script on load and it should automatically adjust the panel width..