Размер NicEdit в Hidden Div уменьшен.
-
13-12-2019 - |
Вопрос
Я пытаюсь использовать редактор NicEdit для текстовой области, скрытой в div.Когда пользователь нажимает кнопку, открывается родительский элемент div целевой текстовой области.Ширина текстовой области установлена на 100% от родительского div.Проблема в том, что родительский div скрыт, поэтому текстовое поле не имеет ширины до того, как родительский div будет открыт.Если я попытаюсь прикрепить редактор NicEdit одновременно с раскрытием его родительского элемента div, редактор окажется крошечным.
<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% от родительского div после его загрузки?
Решение
Конечно, в основном после создания редактора проверьте его, чтобы найти его идентификатор или класс, который у него есть, и установите его ширину. $('#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 был изменен, когда не использует строку ниже): .
$('.nicEdit-main').width('100%');
. $('.nicEdit-panelContain').parent().width('100%');
$('.nicEdit-panelContain').parent().next()
.width($('.nicEdit-panelContain').parent().width()-2);
.
Добавить «-2» на «ширину», если родитель Textarea имеет опоры «прокладки слева» или «PODD вправо».
Это сработало лучшее для меня:
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"});
});
});
.