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
Related
I don't know why, but on scrren size 1024 x 768 my choose options from select are sooo big. How can I do this to this options to be width like select?
I would like to do this only on bootstrap 4 and use only classes from bootstrap but I don't know or it is possible and I don't know why this selects are acting like this. On larger screen sizes everything is ok.
How to fix it?
Here is my code:
<div class="row">
<div class="col-sm-6" style="border: 1px solid black">
<span class="font-weight-bold">Data</span>
<form role="form">
<div class="form-group">
<label class="control-label">Choose</label>
<select class="form-control" name="docType">
<option value="paragon">Test1</option>
<option value="complaint">Test2</option>
</select>
</div>
<div class="form-group">
<label for="docNo">Data</label>
<input type="text" class="form-control" id="docNo">
</div>
<div class="form-group">
<label for="docDate">Data</label>
<input type="text" class="form-control" id="docDate">
</div>
</form>
</div>
<div class="col-sm-6">
Test
</div>
</div>
Do you have something in your CSS that is forcing the options to be a static pixel size instead of allowing bootstrap's width to just be auto?
Usually the options tag will not display large options even if you are using bootstrap, but you could try adjusting the width by using the following css code for all form elements in html.
.form-control
{
width:90%;
}
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 have this code:
<div class="well">
<form role="form" id="shop-order" method="post" action="">
<div class="row">
<div class="form-group">
<div class="col-md-3">
<div class="pull-right">
<label for="name">Label</label>
</div>
</div>
<div class="col-md-6">
<select class="form-control" name="clientId">
$options
</select>
</div>
</div>
</div>
// possibly other rows...
</div>
The result of this code is on this image:
I don't get how I can center label and input in a row. I want them on one line: middle of label opposite middle of input.
How I can do this? Or probably I my html is wrong and this can be achieved by correct html?
I am looking for bootstrap method, I understand, that it can be achieved by line-height. I will do it by line-height if I wouldn't find bootstrap solution. So I am looking for bootstrap solution.
JSFiddle demo
Bootstrap provides a Horizontal Forms style that seems like what you're looking for: http://getbootstrap.com/css/#forms-horizontal
Working Fiddle: http://jsfiddle.net/Nv9Q5/1/
Code:
<div class="well">
<form class="form-horizontal">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">ФИО Клиента</label>
<div class="col-sm-10 col-md-10">
<select class="form-control" name="clientId">
<option>one</option>
</select>
</div>
</div>
</form>
</div>
Set the css line-height of the label to match the height of the input. You'll have to play around to find the right value.
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
Input elements are already inline level element. If you add text-align:center to the parent div it will automatically float to the center.
EDITS
If you want to center it vertically, you need to add one more div wrapping the input box
<div class="vertically_center">
<input type="text">
</div>
CSS
.vertically_center {
display: table-cell;
height: 200px;
vertical-align: center;
}
I'm styling this page and yet I can't seem to access either .4thForm or .3rdForm to style. These elements move responsively when screensize drops below 1024px so it's cruitial that I access these elements.
I've tested the #media call and I can change the colour .frontbannertitle with it so I know it's not the media call. Using inspector I can code the element to achieve what I would like, but it will not let me generate a css element to style it.
I need to edit this div to provide it with a negative margin-top value, as that cannot be achieved by targeting the select within the div.
Jsfiddle: http://jsfiddle.net/P49ja/
<form class="frontbannercontainer form-horizontal">
<fieldset class="frontbanner">
<h1 class="frontbannertitle">Enquire Now!</h1>
<div class="control-group">
<div class="controls">
<input id="textinput1" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls">
<input id="textinput2" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls 3rdForm">
<input id="textinput3" class="frontbannertext input-xlarge" type="text" name="textinput">
</div>
</div>
<div class="control-group">
<div class="controls 4thForm">
<select id="selectbasic" class="frontbannerselect input-xlarge" name="selectbasic">
<option selected="selected" disabled="disabled" value="0">Select Membership</option>
<option value="1">Individual Membership</option>
<option value="2">Corporate Membership</option>
</select>
</div>
</div>
<div id="SliderFormPhone">
<span id="ques">Enquire By Phone:</span>
<span id="ph">(02) 000 000</span>
</div>
<div class="control-group">
<div class="controls">
<button id="singlebutton" class="frontbannerbutton btn btn-primary" name="singlebutton">Apply!</button>
</div>
</div>
</fieldset>
</form>
Thanks!
DEMO
You can not start a class with a number in your case it's .4thForm
Change it to something like .Form4th
I think you cannot use "3rdForm" as a valid class selector.
The first character cannot be numeric.
Refer to this SO answer.
I added "thirdForm" as a class to your fiddle and was able to style it properly. So I'm assuming that is the issue.
you need to add special character "\3" to access this class like below..
.\34thform{
display:none;
margin-top:-7em;
}
sample jsfiddle below...
http://jsfiddle.net/P49ja/4/
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.