Geek Answers Handbook

NicEdit in hidden div resizes

I am trying to use the NicEdit editor for a text field hidden in a div. When the user clicks the button, the target parent div of targetarea is displayed. The width of the text box is set to 100% of the parent div. The problem is that the parent div is hidden, so textrea has no width before the parent div is expanded. If I try to attach the NicEdit editor while displaying its parent div, the editor will be 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 any way to fix this so that the width of the editor is set to 100% of the parent div after loading it?

+5
source share
7 answers

Of course, basically after creating the editor, check it to find its ID or the class that it has, and, for example, set the width of $('#editorsID').width('100%'); .

Or maybe find its parent div width in pixels and set its value.

+1
source

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');
+11
source

The answer from @Hans worked with me ... But I also needed to add this to resize the div containing the editable text (only the container around this div was resized if not using the line below):

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

Add "-2" to "width" if the parent textarea element has a padding-left or padding-right footing.

+2
source

This worked better for me:

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

This will 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%'); }); });
0
source

for those who have the same problem, I optimized this and it looks perfectly 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"}); }); });
0
source

More articles:


All Articles