jquery - 如何自动调整容器内输入字段的大小

Question

我有一个多步骤表单，可以为运送到地点创建动态容器。用户可以移动容器和调整容器大小，但是当我调整大小时输入字段卡在容器外面。我需要将输入字段留在容器内的原因是因为我想添加一个收缩/展开按钮，这样当用户在屏幕上有 10 艘船时，它不会变得一团糟。

JSFiddle Example

我尝试添加以下内容，但它只能让我左右调整大小，不能上下调整。两者我都需要。

 $(function () {
     $("#resizable").draggable({
         containment: "#container"
     }).resizable({
         containment: "#container"
     });
 });

 $(function () {
     $("#resizabletwo").draggable({
         containment: "#container"
     }).resizable({
         containment: "#container"
     });
 });

 #container {
     width: 300px;
     height: 400px;
 }
 #container h3 {
     text-align: center;
     margin: 0;
     margin-bottom: 10px;
 }
 #resizable {
     background-position: top left;
     width: 150px;
     height: 150px;
 }
 #resizabletwo {
     background-position: top left;
     width: 150px;
     height: 150px;
 }
 #resizable, #container {
     padding: 0.5em;
 }

<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container" class="ui-widget-content">
    <h3 class="ui-widget-header">Ship to one</h3>
    <div id="resizable" class="ui-state-active">
        <h3 class="ui-widget-header">Dept. 1</h3>
        <textarea class="form-control" rows="5" id="comment">Address is filled autometically with pevious address</textarea>
    </div>
</div>

Answer 1

在进一步研究之后，我想到了一种更加笨拙但功能强大的 jQuery 方法，其中包括更改高度。

首先我在 CSS 中添加了一个最大宽度:

textarea { max-width: 95%; }

这足以很好地控制#comment 的宽度，但很难确定高度。我最终计算了容器 #resizable div 的高度，然后减去其他子元素的高度和填充，以获得合适的高度数。然后我更新了调整大小的值。

$(function() {
  $( "#resizable" ).draggable({containment: "#container"}).resizable({
    containment: "#container"
  });

  // #resizable height
  var resizableHeight = $( "#resizable" ).outerHeight(true);

  // child elements and padding 
  var resizableH3 = $( "#resizable h3" ).outerHeight(true);
  var resizablePadding = parseInt($( "#resizable" ).css("padding-bottom")) * 2;
  var uiResizableSHeight = $( ".ui-resizable-s" ).outerHeight(true);

  // adding statics and padding together
  var staticVariables = resizableH3+resizablePadding+uiResizableSHeight;

  // assign starting max-height to #comment
  $("#comment").css("max-height",resizableHeight-staticVariables);

  // detect new #resizable height on resize, change #comment max-height
  $( "#resizable" ).resize(function() {
    resizableHeight = $( "#resizable" ).outerHeight(true);
    $("#comment").css("max-height",resizableHeight-staticVariables);
  });
});

您可以在此处查看您的原始代码以及我的代码和其他注释:http://jsfiddle.net/zN62s/63/