隠しDIVのNiceditは小さいサイズ変更です

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

質問

DIVに隠されているTextAreaのNicedit Editorを使用しようとしています。ユーザーがボタンをクリックすると、ターゲットのTextAreaの親のDIVが表示されます。TextAreaの幅は、親の100％に設定されています。問題は、親のDIVが明らかにされる前にTextreaが幅がないように、親の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>
.

ロード後の編集者の幅が親の100％に設定されるように、これを修正する方法はありますか？

役に立ちましたか？

解決

もちろん、基本的にエディタが作成された後、それを検査してそれが持っているIDまたはクラスを見つけ、それはたとえば幅$('#editorsID').width('100%');を設定します。

またはそれがピクセル単位で親の幅を見つけてそれをそれに設定することができます。

他のヒント

私の場合はこれは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のサイズを変更するためにこれを追加する必要がありました（下記の行を使用していないときにその周囲のコンテナのみがサイズ変更されていました）：

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

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

TextAreaの親のPROP "PDDING-LEFT"または "PADDING-right"の場合、 "-2"を "-2"に追加します。

これは私にとって最善を尽くしました：

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