javascript - 更改 html 文本框的高度时，页面的其余部分变得拥挤

Question

我的表单中的某些字段可以是多行的，例如，包括“评论”字段。注意注释全部OK后字段上的间距。

因为用户可以输入多行文本，所以我在页面中添加了以下代码，以便它可以适当调整字段的大小。基本上只需处理文本框上的“OnKeyUp”事件以调整其大小，使其显示高度等于滚动高度。

    function AutoExpandTextbox(txtbox) {
        txtbox.style.height = "1px";
        txtbox.style.height = (4 + txtbox.scrollHeight) + "px";
        ResizeFormGroup(txtbox);
    }
    ....
    <div class="form-group">
        <asp:Label runat="server" AssociatedControlID="commentsTextBox" CssClass="col-lg-2 col-md-2 col-sm-3 col-xs-12 control-label">Comments</asp:Label>
        <div class="col-lg-10 col-md-10 col-sm-9 col-xs-12">
            <asp:TextBox ID="commentsTextBox" onkeyup="javascript: AutoExpandTextbox(this);"  class="form-control input-sm input-full-width" runat="server" MaxLength="255" TextMode="MultiLine"  />

但即使该字段按我想要的方式调整大小，页面上此之后的字段也会挤在一起。这就像浏览器在当前更改后没有保持边距和填充......

由于这种拥挤，我在该事件监听器中添加了一行，它不仅会调整文本框的大小，还会调整包含它的表单组。在 IE 上，这解决了间距问题。但是在 Chrome 上，调整字段大小后的表单仍然像这样变得拥挤。

问题:有没有办法告诉 Bootstrap 或 DOM 适本地更新页面的其余部分？我错过了什么吗？

更新 - 我创建了a PEN to show you this .我尽可能少地放置我的 css(基本上是 css asp.net 给我的)、html 和 javascript，同时仍然重复问题。当你进入这支笔时，开始在注释字段中输入内容，看看字段的垂直间距会发生什么变化。确保在该评论字段中键入多行文本。

Answer 1

这是一个简单的“clearfix”问题，因为您已经 float 了包含表单字段的列。如果不清除这些字段上的 float ，父行将不会尊重 float 子项的高度。

有多种方法可以实现 clearfix。使用您的 Bootstrap 代码，您可以简单地将 .clearfix 类添加到具有 float 子项的父行，以利用 Bootstrap clearfix 方法。或者您也可以在这些行上使用 overflow: auto; 或以其他方式实现您自己的 clearfix 类。

        function AutoExpandTextbox(txtbox) {
            txtbox.style.height = "1px";
            txtbox.style.height = (4 + txtbox.scrollHeight) + "px";
        }

.col-sm-2, .col-sm-10 {
  float: left;
}
.form-group {
  margin-bottom: 25px;
  padding-bottom:25px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<form>
  <div >
    <div class="form-group clearfix">
      <label class="control-label col-sm-2" for="comments">Comments:</label>
      <div class="col-sm-10">
        <textarea class="form-control" id="comments" onkeyup="AutoExpandTextbox(this)"></textarea>
      </div>
    </div>
    <div class="form-group clearfix">
      <label class="control-label col-sm-2" for="field1">Field1:</label>
      <div class="col-sm-10"> 
        <input class="form-control" id="field1" />
      </div>
    </div>
    <div class="form-group clearfix">
      <label class="control-label col-sm-2" for="field2">Field2:</label>
      <div class="col-sm-10"> 
        <input type="password" class="form-control" id="field2">
      </div>
    </div>
    <div class="form-group clearfix"> 
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default">Submit</button>
      </div>
    </div>
  </div>
</form>