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對齊和寬度變化的問題

回答

相關問題