У меня возникла проблема с горизонтальным выравниванием 4 текстовых областей и iframe, где я использую способ изменения размера jQuery-UI. Каждый textarea и iframe отображаются вертикально, даже если у меня есть float: слева в панели .class, чтобы выравнивать объекты по горизонтали.jQuery UI изменяемые размеры при горизонтальном выравнивании и изменении ширины текста
Вторая проблема, которую я заметил, - это каждый изменяемый размер элемент был объявлен с шириной 100 пикселей, но ширина изменена до 93 пикселей, если она появляется (из-за использования изменяемого размера?) При просмотре с помощью инструментов разработки хрома.
В моем jsfiddle содержатся 3 примера. (1) группу блоков Div, которые изменяются по размеру до внешних границ родительского div. Я хотел бы достичь такой же функциональности с textareas и iframe, б) группой текстовых областей, которые НЕ используют изменяемый размер jQuery. Добавлено это, чтобы продемонстрировать, что текстовые поля являются встроенными блоками, которые изменяются по размеру по умолчанию без необходимости плавания: эти элементы остаются. c) Моя проблема продемонстрировала: 4 текстовых поля и один iframe, которые не выравниваются горизонтально и текут за пределы родительского контейнера. Я хотел бы решить проблему выравнивания и быть в состоянии проверить, что изменение размеров текстовых полей работает так же, как блоки DIV, находящиеся в границах ширины родительского DIV.
Другая проблема заключается в том, что с помощью jQuery UI resizable изменяется свойство ширины от 100px до 93px. Надеюсь, этот второй вопрос не будет нарушать правила публикации, о которых я не могу знать.
Спасибо за ваше время.
мой [jsfiddle] [1] [1]: https://jsfiddle.net/KerryRuddock/nbLhvg09/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Resizable</title>
<link rel="stylesheet" href="jqueryui/jquery-ui.css">
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="jqueryui/jquery-ui.js"></script>
<style>
* { padding:0; box-sizing: border-box; }
.h-mt50 { margin-top:50px; }
#div-wrap {
height:40px;
width:400px;
border:1px solid black;
font-size:0px;
}
#d1, #d2, #d3, #d4, #d5 {
height:40px;
width:40px;
display: inline-block;
}
#textarea-wrap {
height:100px;
width:100%;
border:1px solid black;
font-size:0px;
}
#t1, #t2, #t3, #t4, #t5 {
height: 100px;
width: 100px;
box-sizing: border-box;
float:left;
resize:horizontal;
}
#d1, #t1 { background: lime; }
#d2, #t2 { background: teal; }
#d3, #t3 { background: gold; }
#d4, #t4 { background: aqua; }
#d5, #t5 { background: pink; }
</style>
</head>
<body>
<h2 class="h-mt50">Resizable Div blocks</h2>
<div id="div-wrap">
<div id="d1" class="box"></div>
<div id="d2" class="box"></div>
<div id="d3" class="box"></div>
<div id="d4" class="box"></div>
<div id="d5" class="box"></div>
</div>
<h2 class="h-mt50">TextArea - no added jQuery UI </h2>
<textarea></textarea>
<textarea></textarea>
<textarea></textarea>
<h2 class="h-mt50">Resizable TextArea blocks</h2>
<div id="textarea-wrap">
<textarea id="t1" class="panel"></textarea>
<textarea id="t2" class="panel"></textarea>
<textarea id="t3" class="panel"></textarea>
<textarea id="t4" class="panel"></textarea>
<!-- <iframe id="t5" class="panel"></iframe> -->
</div>
<script>
$(function() {
$(".box").resizable({
containment: "#div-wrap",
grid: 20,
maxWidth: 200,
minWidth: 40,
handles: "e",
resize: function(event ,ui){
var parent = ui.element.parent();
var siblingWidth = 0;
ui.element.siblings().each(function() {
siblingWidth += $(this).width();
});
if (parent.width() <= siblingWidth + ui.element.width()) {
ui.element.width(parent.width() - siblingWidth);
}
}
});
$(".panel").resizable({
containment: "#textarea-wrap",
grid: 20,
maxWidth: 200,
minWidth: 40,
handles: "e",
resize: function(event ,ui){
var currentWidth = ui.size.width;
// this accounts for some lag in the ui.size value, if you take this away
// you'll get some instable behaviour
$(this).width(currentWidth);
var parent = ui.element.parent();
var siblingWidth = 0;
ui.element.siblings().each(function() {
siblingWidth += $(this).width();
});
if (parent.width() <= siblingWidth + ui.element.width()) {
ui.element.width(parent.width() - siblingWidth);
}
}
});
});
</script>
</body>
</html>