Здравствуйте! Помогите пожалуйста разобраться.
Использую bootstrap 3.3.7. Есть модальное окно в теле (.modal-body) которого находится элемент textarea. В верхнем правом углу textarea есть иконка по нажатию которой я пытаюсь изменить размер textarea. Поставить его на весь экран. Что-то своего рода редактирование в режиме full screen mode.
Проблема: После нажатия иконки в углу, ширина textarea становится такой же как у модального окна. Тогда как мне нужно чтобы ширина была такой же как у рабочей области браузера. Высота 100vh вроде работает, но она начинается с верхней части модального окна. Я так понял позиционирование происходит по родительскому элементу. Как это исправить?
html:
<div class="dashboard-wrapper">
<div id="dashboard-content">
<div class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form method="post" action="">
<div class="form-group">
<label for="body">Описание</label>
<div class="textarea-wrap">
<textarea name="body" class="form-control" id="body"></textarea>
<i class="fa fa-arrows textarea-icon" aria-hidden="true"></i>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
css:
.dashboard-wrapper {
position: relative;
}
#dashboard-content {
float: right;
width: 100%;
margin-top: 51px;
}
.textarea-wrap{
position: relative;
display: inline-block;
width: 100%;
}
.textarea-wrap .textarea-icon{
position: absolute;
top: 3px;
right: 3px;
color: #BDBDBD;
text-decoration: none;
font-size: 17px;
outline:none;
cursor: pointer
}
.textarea-wrap .textarea-icon:hover{
color: #757575;
outline:none;
}
.textarea-wrap.textarea-wrap-fullscreen{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.textarea-wrap textarea.textarea-fullscreen{
margin-bottom: 30px;
overflow-x: hidden;
overflow-wrap: break-word;
height: 100vh;
}
JS:
$('.textarea-icon').click(function() {
$(".textarea-wrap").toggleClass('textarea-wrap-fullscreen')
$("#body").toggleClass('textarea-fullscreen')
});
Простой
