When changing height of html textbox, rest of page gets crowded
Some of the fields on my form can be multi-line, including, for example, the "comments" field. Notice the spacing on the fields after the comments are all ok.
because the users can enter multi-line text, I have added the following code to the page, so that it will resize the field appropriately. Basically just handle the "OnKeyUp" event on the textbox to resize it so that its display height is equal to its scroll height.
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" />
But even though the field resized like I wanted, the fields after this, on the page, get crowded together. It's like the browser is not maintaining the margins and padding after the current change...
Because of this crowding, I added the line in that event listener that causes not just the textbox to resize, but also the form-group containing it. On IE, that fixed the spacing problem. But on Chrome, the form, after the field that was resized, is still getting all crowded like this.
Question: Is there a way to tell Bootstrap or the DOM to update the rest of the page appropriately? Am I missing something?
UPDATE - I have created a PEN to show you this. I put as little as possible of my css (basically the css asp.net gave me), html and javascript, while still duplicating the problem. When you go into this pen, start typing into the comments field and see what happens to the vertical spacing of the fields. Make sure you type multiple lines of text into that comments field.
It's a simple "clearfix" problem, because you have floated the columns that hold your form fields. Without clearing the float on those fields, the parent rows will not respect the height of the floated children.
There are a number of ways to implement clearfix. Using your bootstrap code, you can simply add a .clearfix class to parent rows that have floated children to utilize bootstraps clearfix method. Or you can use overflow: auto; on those rows as well or implement your own clearfix class in another way.
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>上一篇: 无法反序列化Lazy对象