Few days ago Twitter Bootstrap 3 RC1 released and i just started to play with it on a personal project.
I have a horizontal form which includes some inline radio-checkbox groups but horizontal alignment of these elements are not equal:
Question 1: Why chrome doesn't displays help-block element on the same line with the label?
Question 2: How to align inline radio group on the same line with label?
Question 3: Is following markup valid? Are these problems related with the markup?
Markup:
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label">Weight</label>
<div class="col-lg-1">
<input type="text" name="weight" class="form-control" value="20">
</div>
<div class="help-block"> grams</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Full part name</label>
<div class="col-lg-6">
<input type="text" name="name" class="form-control" placeholder="Don't use numeric characters..">
</div>
</div>
<div class="form-group">
<label class="col-lg-2 control-label">Inline radios</label>
<div class="col-lg-10">
<label class="radio-inline">
<input type="radio" name="radio"> Hello
</label>
<label class="radio-inline">
<input type="radio" name="radio"> Other
</label>
<label class="radio-inline">
<input type="radio" name="radio"> Another
</label>
<label class="radio-inline">
<input type="radio" name="radio" checked="checked"> Foobar
</label>
</div>
</div>
</form>
</div>
EDIT:
Also this markup on a small screen produces a "dropped help-block element". I think my markup is problematic but i have no idea what is wrong.
Your markup seems to be valid on first sight. About your question 1.
You have set your input with:
<div class="col-lg-1">
<input type="text" name="weight" class="form-control" value="20">
</div>
So to width is set with the col-lg-1 prefix, see also: https://stackoverflow.com/a/17920693/1596547. "col-lg-1" stack below 992 pixels. When you're screen width is > 992 px. The div got a width of 8.333% (100/12). The
form-control class set the width of the input tag to 100%. Below the 992px there is no definition for "col-lg-1" cause the 100% width of the input, the input is displayed with 100% width.
Try to use the col-* prefixes which never stacks (or use other CSS to set the width)
I did not found different behavior for Chrome at all. Above the 992px i will find this on both FF and Chrome:
I did not found a solution for your second question yet.
Question 2:
Your labels got a padding-top of 9px from:
.form-horizontal .control-label {
padding-top: 9px;
}
the .radio-inline have no padding, so add the code below to your css:
.radio-inline, .checkbox-inline {
padding-top: 9px;
}
See: https://github.com/twbs/bootstrap/pull/8967
Related
Screenshot
The problem is that there is a huge space between the datetime input field and the text field. How do i fix it? I have used slds-size and also css width property.But none of that works
What should I do to fix it?
I have used slds-grid for the input fields. The 2nd row code is as follows
<div class="slds-grid slds-gutters">
<div class="slds-col slds-m-left_small">
<label for="rcdt"><div class="required-field">Receiving Date Time</div></label>
<lightning-input id="rcdt" variant="label-hidden" type="datetime"></lightning-input>
</div>
<div class="slds-col">
<label for="delnoid">Delivery Note Number</label>
<lightning-input type="text" variant="label-hidden" id="delnoid"></lightning-input>
</div>
<div class="slds-col slds-m-right_small">
<label for="notesid">Notes</label>
<lightning-input type="text" variant="label-hidden" id="notesid"></lightning-input>
</div>
</div>
I'm using Bootstrap 4.2.1 and I have an inline form that displays perfectly at viewport widths > 575 px:
However, at viewport widths < 576 px, the form submit button becomes misaligned, dropping slightly:
I've replicated the problem here: https://www.codeply.com/go/hW1xZkJXQ9
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control mr-2" id="Email" placeholder="user#gmail.com">
</div>
<button class="btn btn-primary" type="submit">Add</button>
</form>
</div>
</div>
Any ideas why this happens at smaller screen widths?
Here's what I ended up doing without having to customize the core Bootstrap CSS.
I learned that .form-inline only displays form elements inline at screen widths of at least 576 px. Additionally, I was incorrectly using .form-group along with .form-inline when I should have been using .input-group on the inputs, as was pointed out above. But this still didn't allow me to keep things inline at narrow screen widths of less than 576 px.
Therefore, I abandoned .form-inline altogether and instead used a form grid approach using Bootstrap's built-in grid classes. I used .form-row and treated the inline form elements as normal columns:
Updated Codeply: https://www.codeply.com/go/hwBPwM6qTV
<div class="container">
<form>
<div class="form-row">
<div class="col-8 col-sm-5 col-md-4">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control" id="Email" name="Email" placeholder="user#gmail.com">
</div>
</div>
<div class="col">
<button class="btn btn-primary" type="submit">Add</button>
</div>
</div> <!-- .form-row -->
</form>
</div>
This keeps everything inline at very narrow screen widths:
Obviously, the columns can be changed to suit the needs of the particular application or preference.
after 576px, form-control remove inline block property, so i will add it for all resolution.
and for btn, i am using mt-n3 mt-sm-0 bootstrap class.
updated codeply: https://www.codeply.com/go/35ENnBhxpA
body {
padding:100px;
}
.form-control {
display: inline-block !important;
width: auto;
vertical-align: middle;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="container">
<div class="row">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="Email">Email address</label>
<input type="email" class="form-control mr-2" id="Email" placeholder="user#gmail.com">
</div>
<button class="btn btn-primary mt-n3 mt-sm-0" type="submit">Add</button>
</form>
</div>
</div>
Noticed something strange on my Bootstrap forms today (v303).
I set my labels to use 3 columns and the input field to use 9 columns, and normally I'd expect this to extend full width of the available space.
But the fields seem to have a mind of their own and are adjusting to their own widths... I can't seem to get them to extend.. even if I add more columns.
What's strange is that, for my fields w/ Bootstrap PREPEND character, it goes full width as expected.
screenshot:
code:
<div class="form-group">
<label class="col-sm-3 control-label">A</label>
<div class="col-sm-9">
<div class="input-group">
**<span class="input-group-addon">#</span>**
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">B</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
You are using the input-group class incorrectly.
Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use .input-group with an .input-group-addon to prepend or append elements to a single .form-control.
http://getbootstrap.com/components/#input-groups
input-group will only work well when textbox has other elements before and/or after. As such, from your second input either remove the enclosing input-group div or add some surrounding content within the tag.
<div class="form-group">
<label class="col-sm-3 control-label">A</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">B</label>
<div class="col-sm-9">
<input type="text" class="form-control" placeholder="Username">
</div>
</div>
I'm having trouble trying to resolve this issue. The docs say that I should set the span equal to the parent span, however, it extends to the right outside of the well container when I do that. It looks fine when viewed on mobile (extends the appropriate amount to the right, filling the well), however, it doesn't play well on desktop (I want the fields to extend inside the well).
<div class="container">
<div class="row">
<div class="span4 offset4">
<div id="login-panel">
<div class="well bordered clearfix">
<div class="text-center">
<div class="page-header" style="border-bottom: none; margin: 0;">
<img src="library/img/logo-01.png"/>
</div>
</div>
<form method="POST" action="#" accept-charset="UTF-8" class="pull-left">
<legend>App name</legend>
<div class="control-group ">
<!-- username field -->
<div class="controls">
<label>Email</label>
<input class="span4" type="text" name="email" value="" id="email" placeholder="Your email address">
</div>
</div>
<div class="control-group">
<label>Password</label>
<!-- password field -->
<input type="password" name="password" id="password" placeholder="Password">
</div>
<div class="control-group ">
<p>
<input class="btn btn-default pull-left" type="submit" value="Sign-up">
<input class="btn btn-primary pull-right" type="submit" value="Login">
</p>
</div>
</form>
</div>
</div>
</div>
</div> <!-- end row -->
</div> <!-- end container -->
Docs are actually saying:
Use .span1 to .span12 for inputs that match the same sizes of the grid
columns.
But you want to make a full-width <input>, right?
Make an <input> to take full width
input.full-width {
box-sizing: border-box;
width: 100%;
height: 30px;
}
Also remove .pull-left from the <form>. See how it woks on this fiddle.
Edit
Since Bootstrap 2.2.0 use bundled input-block-level class to achieve this effect.
I ran into this problem recently with form and panel body. Upon inspection I noticed that the problem wasn't the inputs, but rather the form itself was extending beyond the panel. I fixed it by putting a max-width: 100% on the form instead of the input.
I was wondering if there is a way to change the height and width of both text boxes. I tried:
.class{width:200px;height:100px;}
But it has no effect. Is there anyway I can select both without having to type:
#firstname, #lastname{width:200px; height:100px;}
Here is the code:
<div class="info">
<input type="text" id="firstname" >
</div>
<div class="info">
<input type="text" id="lastname" >
</div>
Thanks!
.info input {width:200px;height:100px}