Question

我有一个多步骤表单，可以为船舶创建动态容器。用户可以移动容器并调整其大小，但在调整大小时，输入字段会悬挂在容器外部。我需要输入字段留在容器中的原因是因为我想添加一个缩小/展开按钮，这样当用户在屏幕上有10个船只时它就不会变得一团糟。

我尝试添加以下内容，但它只允许我左右调整，而不是上下调整。我需要两个。

 $(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

添加此CSS规则：

#resizable textarea { width : 100%; max-width:100%;}

Answer 2

您可以将其添加到CSS：

#resizable textarea{width:100%;}

或配置身高：

#resizable textarea{width:100%;height:75%;}

您也可以使用calc：

textarea{width:100%;height:calc(100% - 39px)};

Answer 3

在看了这个之后，我提出了一个更加严厉但功能强大的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/

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

3 个答案: