jQuery UI可调整水平textareas对齐和宽度变化的问题

我有一个水平对齐的4 textareas和iframe我在使用jQuery-UI可调整大小的方法的问题。每个textarea和iframe都显示为垂直堆叠，即使我在面板的.class中使用float：left来水平对齐。jQuery UI可调整水平textareas对齐和宽度变化的问题

我注意到的第二个问题是，每个可调整大小的元素被声明为，宽度为100px，但宽度被更改为93px，因此在使用chrome开发工具进行查看时会出现（使用可调整大小？）。

我的jsfiddle包含3个示例。（1）一组可以调整到父div外边界的Div模块。我想用textareas和iframe实现这个相同的功能，b）一组不使用jQuery可调整大小的textareas。添加了这个来证明textareas是可以在不需要浮动的情况下调整大小的默认值的内联块：留下这些元素。 c）我的问题证明：4个textareas和一个iframe不能水平对齐并超出父容器边界。我想解决对齐问题，并能够测试textareas resizability的操作方式与DIV块保留在父DIV的宽度边界内相同。

另一个问题是，使用jQuery UI可调整大小将宽度属性从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>

来源

2016-12-15 Eggs

惊人的什么人能3个月学习。修复了这个问题我和更新这个fiddle

你可以看到我添加的.ui-包装{ float: left };的CSS

来源

2017-04-07 22:12:27 Eggs

jQuery UI可调整水平textareas对齐和宽度变化的问题

回答

相关问题