当改变html文本框的高度时,页面的其余部分会变得拥挤

Question

我表单上的一些字段可以是多行的,包括例如"评论"字段.请注意注释后字段上的间距都可以.

因为用户可以输入多行文本,所以我将以下代码添加到页面中,以便它适当地调整字段大小.基本上只是处理文本框上的"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适当更新页面的其余部分？我错过了什么吗？

更新 - 我已经创建了一个PEN来向您展示.我尽可能少地把我的CSS(基本上是css asp.net给我),html和javascript,同时仍然重复问题.当你进入这支笔时,开始输入评论字段,看看字段的垂直间距会发生什么.确保在该注释字段中键入多行文本.

Answer 1

这是一个简单的“clearfix”问题，因为您已经浮动了保存表单字段的列。如果不清除这些字段上的浮动，父行将不会考虑浮动子行的高度。

有多种方法可以实现clearfix。使用引导程序代码，您可以简单地将一个.clearfix类添加到具有浮动子项的父行，以利用引导程序的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>