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/
Related
Why is one input box full width and the others so short? This is my html. I am using bootstrap:
<form action="https://www.example.net/auth/create_user" class="form-horizontal" id="login-attempts-form-admin method="post" accept-charset="utf-8">
<div class="container">
<div class="row">
<div class="col-sm-6 col-xs-6">
<!-- id -->
<div class="form-group">
<label for="id">
Reference Id
</label>
<div class="input-group">
<input type="text" name="id" value="" id="id" style="" class="form-control" placeholder="" disabled="disabled" />
<div class="input-group-addon"><i class="ti-info"></i>
</div>
</div> <!-- end input group -->
<span class="help-block">
The Reference Id is created automatically.
</span>
</div> <!-- end form-group Id -->
<!-- ip_address -->
<div class="form-group">
<label for="ip_address">
IP Address
</label>
<div class="input-group">
<input type="text" name="ip_address" value="" id="ip_address" style="max-width:none !important" class="form-control input-xlarge" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group ip_address -->
<!-- login -->
<div class="form-group">
<label for="login">
Login
</label>
<div class="input-group">
<input type="text" name="login" value="" id="login" style="" class="form-control" placeholder="" />
</div> <!-- end input group -->
</div> <!-- end form-group login -->
</div>
</div> <!-- end of row -->
</div> <!-- end of container. -->
</form>
I even tried to make the ip_address field wider by stating style="max-width:none !important" but no use. Is there any way to make the fields wider? Is there a preset width in bootstrap? I was of the belief the default was max width.
This is what my final output looks like:
Low rep to add as a comment, but trying your code end up with same length input fields. So don't see a problem from my end.
One thing maybe the version of bootstrap you are using, as I used the latest from the Bootstrap page (4.1.3), as older versions might have some changes within the CSS.
You could add your CSS which would give a better view if you are not changing something.
Another thing is to try:
input {
max-width: 100%;
}
When I tested the code I didn't see any different widths with the inputs.
On ip_address field, I am using style="max-width:none !important"... Any CSS you add will not work with the inline style max-width:none; !important.
It will override any changes you are making in the CSS file or any where else. Inline styles especially !important will override any attached style sheets or classes.
I think the problem may be you have this on your input style="max-width:none !important"It is overriding the default bootstrap setting and not setting your input to max width.
That's if you want them wider, shorter wrap in a <div> then manipulate the <div> with CSS or the "col-sm-6" etc.. classes.
Example from Bootstrap website version 4. Also, version 3 has the "form-control" class as well. It makes your form 100% width then you can manipulate it by wrapping in a <div> of your choice or another suitable element or CSS.
EXAMPLE:
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name#example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
https://getbootstrap.com/docs/4.0/components/forms/
When I tested the input field lengths weren't different.
But if it happens try styling the input tag with
<input style="max-width: 100%">
or add this to css
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
I'm making a form with Twitter Bootstrap, and am having a really difficult time centering the button. It's contained inside a div with a span of 7. Below is the HTML, and the button is at the very bottom. Any recommendations on how to center this thing?
<div class="form span7">
<div id="get-started">
<div id="form-intro">
<strong><h1>1. Get Started: Some basics</h1></strong>
</div>
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="inputSaving">What are you saving for?</label>
<div class="controls">
<input class="span4" type="text" id="inputSaving" placeholder="e.g. Swimming Lessons, Birthday Party, College Fund, etc.">
</div>
</div>
<div class="control-group">
<label class="control-label" for="description">Add a short description</label>
<div class="controls">
<textarea class="span4" id="description" rows="4" placeholder="Describe in your own words the saving goal for this piggybank"></textarea>
</div>
</div>
<div class="control-group">
<label class="control-label" for="categoryselect">Choose a Category</label>
<div class="controls">
<select class="span4" id="categoryselect">
<!-- Add some CSS and JS to make a placeholder value-->
<option value="Kittens">Kittens</option>
<option value="Keyboard Cat">Keyboard Cat</option>
<option value="Twitter Bird">Twitter Bird</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label" for="imageselect">Choose an image</label>
<div class="controls span4">
<img src="piggyimage.png" id="imageselect" alt="image-select" />
</div>
</div>
<div class="control-group">
<label class="control-label" for="goal">Your Saving Goal</label>
<div class="controls">
<input type="text" class="span4" id="goal" placeholder="$1337">
</div>
</div>
<button class="btn btn-large btn-primary" type="button">Submit</button>
</form>
</div>
</div>
Bootstrap has it's own centering class named text-center.
<div class="span7 text-center"></div>
If you don't mind a bit more markup, this would work:
<div class="centered">
<button class="btn btn-large btn-primary" type="button">Submit</button>
</div>
With the corresponding CSS rule:
.centered
{
text-align:center;
}
I have to look at the CSS rules for the btn class, but I don't think it specifies a width, so auto left & right margins wouldn't work. If you added one of the span or input- rules to the button, auto margins would work, though.
Edit:
Confirmed my initial thought; the btn classes do not have a width defined, so you can't use auto side margins. Also, as #AndrewM notes, you could simply use the text-center class instead of creating a new ruleset.
Wrap in a div styled with "text-center" class.
Question is a bit old, but easy way is to apply .center-block to button.
Since you want to center the button, and not the text, what I've done in the past is add a class, then use that class to center the button:
<button class="btn btn-large btn-primary newclass" type="button">Submit</button>
and the CSS would be:
.btn.newclass {width:25%; display:block; margin: 0 auto;}
The "width" value is up to you, and you can play with that to get the right look.
Steve
.span7.btn { display: block; margin-left: auto; margin-right: auto; }
I am not completely familiar with bootstrap, but something like the above should do the trick. It may not be necessary to include all of the classes. This should center the button within its parent, the span7.
If you have more than one button, then you can do the following.
<div class="center-block" style="max-width:400px">
Accept
Reject
</div>
Bootstrap have a specific class for this:
center-block
<button type="button" class="your_class center-block"> Book </button>
We have the following form:
<div class="form-horizontal">
<fieldset>
<legend>Reports</legend>
<div class="control-group">
<label class="control-label">Year</label>
<div class="controls">
<select id="ddlYear" class="input-small">
<option value="2011">2011</option>
<option selected="selected" value="2012">2012</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Project</label>
<div class="controls">
<label class="" id="lbProjectDesc">House X repairs</label>
</div>
</div>
<div class="control-group">
<label class="control-label">Costs</label>
<div class="controls">
<div class="input-append">
<input type="text" value="0,0" class="span2" id="tbCosts" disabled="disabled" >
<span class="add-on">€</span>
</div>
</div>
</div>
<hr>
<div class="control-group">
<div class="controls">
<input type="submit" value="Save" onclick="$(this).button('loading');" id="btnSave" class="btn btn-primary" data-loading-text="Saving...">
</div>
</div>
</fieldset>
</div>
http://jsfiddle.net/9JNcJ/2/
The problem is that the label lbProjectDesc (text= "House X repairs") is not displayed correctly.
What class can we set or what change needs to be made to fix it?
(Preferrably the correct way, not a css hack)
#lbProjectDesc {
margin-top: 5px;
}
(doesn't consider this as a "hack" :) forked : http://jsfiddle.net/davidkonrad/LK95Q/
Taking into account Selva and davidkonrad responses we solved it like this:
.form-horizontal .control-group .controls label {
margin-top: 5px;
}
This way it affects all the cases where labels are inside horizontal forms but doesnt displace verticaly the description labels of other input types...
Works too with padding-top: 5px;
Avoid the unwanted padding from that and set what ever you want. Here problem is padding.
#lbProjectDesc {
margin-top: 5px;
}
add and see.
Demo : http://jsfiddle.net/9JNcJ/5/