Niceit en Hidden DIV se redimensiona

Question

Estoy tratando de usar el editor de Nicedit para una textarea oculta en un div.Cuando el usuario hace clic en un botón, se revela el DIV principal objetivo de Textarea.El ancho de la textarrea se establece en el 100% del DIV principal.El problema es que el DIV de los padres está oculto, por lo que la textrea no tiene un ancho antes de que se revele el DIV de los padres.Si trato de adjuntar al editor de Nicedit al mismo tiempo que revele su DIV principal, el editor aparece pequeña.

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

¿Hay alguna manera de solucionar esto para que el ancho del editor esté establecido en el 100% del DIV de los padres después de que esté cargada?

Answer 1

Por supuesto, básicamente después de que se cree el editor, inspeccione que busque su identificación o una clase que tiene, y configura su ancho $('#editorsID').width('100%');, por ejemplo.

o tal vez encuentre que sea el ancho de Padres Div en píxeles y lo configure a eso.

Answer 2

En mi caso, esto funcionó con jQuery:

new nicEditor().panelInstance('myArea');

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

o al ancho absoluto:

$('.nicEdit-panelContain').parent().width('400px');
$('.nicEdit-panelContain').parent().next().width('400px');

Answer 3

La respuesta de @Hans trabajó conmigo ... pero necesitaba agregar esto también para cambiar el tamaño del div que contiene el texto que se está editando (solo el contenedor alrededor de ese div se estaba redactando cuando no se usa la línea a continuación):

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

Answer 4

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

Agregar "-2" a "Ancho" Si el padre de TexTarea tiene la punta "PADDING-IZQUIERDA" o "PADDING-DERECHO".

Answer 5

Esto funcionó mejor para mí:

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

Answer 6

¡Esto resuelve mi caso! Gracias

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

Answer 7

Para aquellos que tienen el mismo problema, optimizé eso y se ve completamente 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"});
    });
});