Je rencontre un problème d'alignement horizontal de 4 zones de texte et d'une iframe dans laquelle j'utilise la méthode redimensionnable jQuery-UI. Chaque zone de texte et iframe apparaissent empilés verticalement même si j'ai utilisé float: left dans le panneau .class pour aligner les choses horizontalement.Problèmes redimensionnables de l'interface utilisateur jQuery sur l'alignement horizontal des zones de texte et la modification de la largeur
Le deuxième problème que j'ai noté est chaque élément redimensionnable a été déclaré avec une largeur de 100px, mais la largeur est modifiée à 93px il apparaît (de l'utilisation de redimensionnable?) Vu avec des outils de développement de chrome.
Mon jsfiddle contient 3 exemples. (1) un groupe de blocs Div qui sont redimensionnables aux limites externes de la div parente. Je voudrais réaliser cette même fonctionnalité avec textareas et iframe, b) un groupe de textareas qui n'utilisent pas jQuery redimensionnable. Ajouté ceci pour démontrer que les textareas sont des blocs inline qui sont redimensionnables BY DEFAULT sans avoir besoin de flotter: a laissé ces éléments. c) Mon problème a été démontré: 4 zones de texte et une seule iframe qui ne s'alignent pas horizontalement et s'écoulent au-delà des limites du conteneur parent. Je voudrais résoudre le problème d'alignement et être capable de tester que la resisabilité textareas fonctionne de la même manière que les blocs DIV restant dans les limites de largeur de la DIV parent.
Un autre problème est que l'utilisation de l'interface utilisateur jQuery redimensionnable modifie la propriété de largeur de 100px à 93px. J'espère que cette deuxième question ne viole pas les règles d'affichage que je ne connais peut-être pas.
Nous vous remercions de votre temps.
mon [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>