Hidden Div의 NicEdit 크기가 작게 조정되었습니다.

StackOverflow https://stackoverflow.com//questions/11704769

문제

div에 숨겨진 텍스트 영역에 대해 NicEdit 편집기를 사용하려고 합니다.사용자가 버튼을 클릭하면 대상 텍스트 영역의 상위 div가 표시됩니다.텍스트 영역의 너비는 상위 div의 100%로 설정됩니다.문제는 상위 div가 숨겨져 있으므로 상위 div가 표시되기 전에 텍스트 영역에 너비가 없다는 것입니다.상위 div를 표시하는 동시에 NicEdit 편집기를 연결하려고 하면 편집기가 작게 나타납니다. 

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

편집기가 로드된 후 편집기 너비가 상위 div의 100%로 설정되도록 이 문제를 해결할 수 있는 방법이 있습니까?

도움이 되었습니까?

해결책

물론, 기본적으로 에디터가 생성된 후에는 에디터의 ID나 클래스를 확인하고 너비를 설정합니다. $('#editorsID').width('100%'); 예를 들어.

아니면 상위 div의 너비를 픽셀 단위로 찾아서 그 값으로 설정할 수도 있습니다.

다른 팁

내 경우에 이것은 jQuery와 함께 일했습니다 : 

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

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

또는 절대 너비 : 

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

@hans의 답변은 나와 함께 일했습니다 ... 그러나 편집중인 텍스트가 포함 된 DIV의 크기를 조정해야했습니다 (아래 줄을 사용하지 않을 때는 DIV 주위의 컨테이너만이 크기가 조정되고 있음). 

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

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

텍스트 rea의 부모가 "패딩 왼쪽"또는 "패딩 오른쪽"이 있으면 "폭"을 "너비"에 추가하십시오.

이것은 나를 위해 가장 잘 작동했습니다 : 

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

이것은 내 사건 해결! 감사합니다 

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

동일한 문제가있는 사람들을 위해, 나는 그것을 최적화하고 완전히 정상적으로 보입니다. 

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

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top