NicEdit in Hidden Div is resized small

Question

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?

score 13 · Answer 1 · answered Aug 17 '12 at 06:59

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

score 2 · Answer 2 · answered Oct 04 '13 at 01:43

2

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

answered Oct 04 '13 at 01:43

A. Genedy

578
4
11

score 2 · Answer 3 · answered Jul 27 '16 at 21:03

2

$('.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".

answered Jul 27 '16 at 21:03

Choo Hwan

416
3
12

score 2 · Answer 4 · answered Apr 13 '18 at 15:13

2

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

answered Apr 13 '18 at 15:13

avjaarsveld

579
6
9

score 1 · Accepted Answer · answered Jul 28 '12 at 22:01

1

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.

answered Jul 28 '12 at 22:01

Mark Pieszak - Trilon.io

61,391
14
82
96

André Lopes · Answer 6 · 2019-01-14T17:31:35.050

0

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

edited Jan 14 '19 at 17:31

answered Jan 14 '19 at 16:57

André Lopes

1
2

score 0 · Answer 7 · answered Jun 06 '19 at 07:27

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"});
    });
});

score 0 · Answer 8 · answered Dec 11 '20 at 23:51

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..

NicEdit in Hidden Div is resized small

8 Answers8