I'd like some form fields to be side by side when there's width available on the client, and stacked neatly when there isn't. It's almost working, but not quite "stacked neatly". Here's the markup ...
<div class="form-group">
<div class="col-md-3">
<input type="text" placeholder="State" class="form-control" ng-model="family.state">
</div>
<div class="col-md-4">
<input type="text" placeholder="Zip" class="form-control" ng-model="family.zip">
</div>
<div class="col-md-4">
<div class="checkbox">
<input type="checkbox" ng-model="family.listAddress">List address</input>
</div>
</div>
</div>
Here's the wide result, which is as desired:
But here's the narrow result which is not quite right (because of the missing vertical space):
What does your CSS look like? You can add a class to all of these divs and apply a simple margin: 5px; and that could solve your problem.
Related
I have a form with multiple inputs.
All of those inputs are Dropdowns, Checkboxes, short Texts, etc. Except one which can be come quite large (textarea). I want all the smaller Inputs on the left side of the Page and the textarea on the right side of the Page.
The Textarea is supposed to have the same height as all the elements on the right side and take roughly half of the Pages width.
My problem is now that I am unable to properly add the Textarea to the right Side. When I use "float:right" then it either has an huge gap between the smaller Elements and itself, or it is small and when I make it bigger then the small Elements become smaller. Or it has the correct size, but then it only has one Element on the left side and every other Element comes after the Textarea has ended.
<form method="post">
<input asp-for="ID" type="hidden" />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="row " >
<div class="form-group col-md-6">
<label asp-for="Title" class="control-label"></label>
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger"></span>
</div>
<div class="form-group col-md-5">
<label asp-for="Comment" class="control-label"></label>
<textarea asp-for="Comment" rows="14" class="form-control" oninput='this.style.height = "";this.style.height = this.scrollHeight + 3 + "px"' height:"100vh">
</textarea>
<span asp-validation-for="Comment" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
.....
</div>
<div class="form-group col-md-3">
....
</div>
</div>
<div class="row">
#if (Model.Valid is not null)
{
<div class="form-group col-md-3">
....
</div>
}
<div class="form-group col-md-3">
....
</div>
</div>
<div class="row">
......
<hr />
.....
So, all the smaller Elements are inside the "form-group", which are mostly inside "row". And on the right side I now want the Comment TextArea.
I would prefer a plain Bootstrap Solution (especially since everything else is already working in Bootstrap), but I am open to everything.
I am having issues centering a form in Bootstrap. I also don't seem to be able to resize the input boxes. I would like to have it centered.
This is what I have:
<div class="form-group row" id="SignupCreate">
<div class="col-sm-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
</div>
And for CSS I started:
#SignUpCreate {
padding-top: 200px;
margin-right: 30px;
margin-left: 30px;
}
you only need to apply some width and make it center with margin: 0 auto
<div class="form-group row" id="signupcreate">
<div class="col-sm-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
below code will center your form
#signupcreate{
width: 60%;
margin: 0 auto;
float: none;
}
You probably want to put it inside a container. Like this:
<div class="container">
<div class="row">
// Your code here
</div>
</div>
Possible duplicate of: Center Form using Twitter Bootstrap
There are a couple ways to solve this but I really recommend to use bootstrap itself to do it.
What I recommend is using offsets. So if you want your form centered just use something like:
<div class="form-group row" id="SignupCreate">
<div class="col-sm-4 col-sm-offset-4">
<label>Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
<div class="col-sm-4 col-sm-offset-4">
<label>Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
<div class="col-sm-4">
<button type="submit">Submit</button>
</div>
</div>
</div>
You can tweak your offsets for xs, sm, md and lg accordingly, make sure to set offset to 0 if you don't want offset in a particular view.
Now for your styles, you are giving css a SignUpCreate id when in fact is SignupCreate, remember css selectors are case sensitive.
Also keep in mind for the future that when using bootstrap you should try as much to stick to the framework and use all its features instead of coding your own CSS, and when you do, a good thing to keep in mind is that CSS uses "points" to know which styles are more relevant, I recommend checking Specifics on CSS Specificity
So let's say you want to style something that has padding right and left, I would avoid using a row or column element to do this and would add a second container div to "respect" bootstrap styles.
I hope this answer is helpful :)
There is also a good answer here: Center a column using Twitter Bootstrap 3
UPDATE:
With boostrap 4.5^ you can center any item using d-flex justify-content-center on the parent, if you also want to align the items vertically (relative to the parent's height) simply add align-items-center.
The generated HTML I have is this:
I put it in Bootply so you can just see and play with it easier, notice it has a small CSS section too:
http://www.bootply.com/NrxiDfZJdC
Problem is it is not "bootstrappy" enough! If you start making the window smaller the labels jump to the right side of the control.
What have I done that has caused this issue?
You have a couple of major problems here.
Right Alignment:
You have set this by adding .text-right on your labels. Obviously this was meant for the desktop view only. Take it off of your labels and use a min-width media query to set the alignment or override the alignment with max-width at small resolutions
Overflowing text boxes:
You didn't use a row. You should most always use a row because it corrects the padding wit negative left and right margins. You tried to fix this yourself by instead adding a class that removes the padding on the .col-sm-4. The padding is there for a reason and should not be removed. Even adding in the row and removing the .multi-row doesn't completely correct the issue, however. When you do that you run into the text inputs being too wide. That is because you added the 100% width to the inputs. This is not a bad thing per se, but it causes problems because you have used spans for your inner columns. spans are naturally collapsed in width. They don't fill their parents' container like divs do. Swap them for divs.
Weird "Ext" label:
This is because you added a margin-left: 85% to the label to simulate the right alignment that the others have. Just remove that margin and add text-right to this label like you have on all the other similar labels.
No padding:
After all that, you'll have no padding on smaller resolutions. Add a .container around your form.
In the end, you should have this: http://www.bootply.com/uiPpBytre3
Demo:
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.form-input{
width :100%;
}
#media(max-width: 768px) {
.form-group .text-right {
text-align: left;
}
}
<div class="container">
<form class="form-horizontal" role="form">
<br>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Name">Name</label></div>
<div class="col-sm-4"><select class="form-control" id="nameadmin" name="nameadmin"><option>77881</option>
<option>77882</option>
<option>77883</option>
<option>77884</option>
<option>77885</option>
</select></div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowEmailInFooter" name="ShowEmailInFooter" type="checkbox" value="true"><input name="ShowEmailInFooter" type="hidden" value="false">
<label class="control-label" for="Show_Email_in_Footer">Show Email in Footer</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px; color: lightblue"></span>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-5"><input class="form-input" id="AdminPhone" name="AdminPhone" type="text" value=""></div>
<div class="col-sm-2 text-right"><label class="control-label" for="Ext">Ext</label></div>
<div class="col-sm-5"><input class="form-input" id="AdminExt" name="AdminExt" type="text" value=""></div>
</div>
</div>
</div>
</form>
</div>
Add responsive text align class text-sm-right instead of text-right
#media (min-width: #screen-sm-min) {
.text-sm-right { text-align: right; }
}
bootply
I have 3 columns in my form for inputting the user's phone:
<div class="col-md-5">
<label class="control-label">Phone</label>
<div class="row">
<div class="col-md-4">
<label for="phone_code" class="sr-only"><fmt:message key="phoneCode"/></label>
<select class="form-control" name="phoneCode" id="phone_code">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<span class="col-md-2 text-center">-</span>
<div class="col-md-6">
<label for="phone_number" class="sr-only">phone number</label>
<input type="tel" class="form-control" name="phoneNumber" id="phone_number" dir="LTR" value="${phoneNumber}">
</div>
</div>
</div>
http://www.bootply.com/jgFqaA4r6o
When I include the bootstrap css for rtl:
https://github.com/morteza/bootstrap-rtl
this flips the order of the columns, which in most cases is the desired result. However, I would like the phone input columns to remain in the same order (unaltered).
Including the pull-left class to the first two columns fixes the problem but causes errors when resizing (specifically, shrinking) the screen.
I have tried using/learning the col--pull-/col--push- classes but I couldn't figure out how to make them work here.
Does anybody have any suggestions?
I am also open to changing the general layout if there are improvements on that as well.
Thank you.
I changed the html and used a small "hack" to solve this.
There is still probably a better solution out there. This is my html:
<div class="col-md-5">
<div class="col-sm-4 col-xs-12 pull-left">
<label for="phone_code" class="control-label">phone code</label>
<input type="text" class="form-control">
</div>
<div class="col-sm-8 col-xs-12">
<label for="phone_number" class="control-label">phone number</label>
<input type="tel" class="form-control">
</div>
</div>
http://www.bootply.com/tIW6xBHVGB
The "hack" is the "col-xs-12" class added to the <div> elements. If not added, the divs don't expand to take up the entire row as they should due to the "pull-left" class.
I'm open to hearing other suggestions.
I'm using Bootstrap v2.1.1. I'm finding problem with the width of inputs.
This is my simple form:
<form>
<div class="controls-row">
<div class="span3">
<label class="control-label">A:</label>
<div class="controls">
<input type="text" class="span3"/>
</div>
</div>
<div class="span4">
<label class="control-label">B:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
<div class="controls-row">
<div class="span3">
<label class="control-label">C:</label>
<div class="controls">
<select class="span3">
<option>1111111</option>
<option>2222222</option>
<option>3333333</option>
</select>
</div>
</div>
<div class="span4">
<label class="control-label">D:</label>
<div class="controls">
<input type="text" class="span4"/>
</div>
</div>
</div>
</form>
Using this code the select has a different width, it is NOT the same as <input> with span3 class.
It is very very strange because, if i put span3 in and (using the code above) the width is equal.
COuld someone explain me how can I set equal widths using bootstrap span*
According to the Bootstrap doumentation using the span* classes on your inputs etc should work.
http://twitter.github.com/bootstrap/base-css.html#forms
I'm wondering if it may not be working because you have your form layed out as if it's meant to be a form with the class of "form-horizontal" on it but you don't actually have that class in place.
I'm not sure if a horixontal form can use the span* classes to size it's input elements.
You could try using the "input-block-level" class on your elements instead and see if that does the job for you.
Try adding "inline-block-level"
http://twitter.github.com/bootstrap/base-css.html#forms