I have an email input field that has to be aligned in the center of the page. I have tried using alignment, but it wouldn't align the input field. I can align the text in the input field, but not the physical input field.
"input" element is inline-element.
<div>
<input type="email" style="text-align:center" value="text is center"/>
</div>
this align the text in the input field.
you should be put style to parent.
<div style="text-align:center">
<input type="email" value="input box is center"/>
</div>
of course - "input" element should inline type.
if you changed "input" element's display type
try to other way.
<div>
<input type="email" style="display:block;margin:0 auto;" value="input box is center"/>
</div>
or
<div style="display:flex;justify-content:center;">
<input type="email" style="display:block;" value="input box is center"/>
</div>
Related
This is driving me crazy. I've got a few sibling elements in the same form, input fields and divs (that contain input fields that need to stay on the same line), but when 100% width is applied to each, they aren't the same length; the divs are the same length as the other divs, and the independent inputs are the same as the other inputs. I've tried everything I can think of, and I can't figure out what's causing this behavior. It's messing-up my responsive styling, so I've come to a bit of a standstill...
If the width is 100%, and the elements are direct siblings of the same parent element, they SHOULD have equal widths, correct? In the screenshots below, the inputs inside the "bi-field-div" and "tri-field-div" elements are shorter, and the inputs that aren't inside a div are longer, even though the divs and inputs are both children of the same form element and are set to 100% (the one input you see in a class-less, id-less div still renders the same length as if there were no div at all-- I put it in there to test it.) I've tried extending the inputs within the divs by way of different percentages and margins and padding, but the div itself stays that shorter length, so the inputs within it just end up on different lines at a certain point; I've also fiddled with the positioning, displays, and everything else, and just can't get these stubborn things to stretch out equally!
I'll greatly appreciate any constructive advice you can give me.Thank you.
HTML:
<form>
<!-- pop-out text -->
<div class="div-form">
<p id="call-to-action">SIGN UP</p>
<p id="sub-text">Subrscribe to our newsletter</p>
<div id="bi-field-div">
<input type="text" class="form-field left-inline-field" placeholder="First Name">
<input type="text" class="form-field right-inline-field" placeholder="Last Name">
</div>
<div>
<input type="text" id="email" class="form-field" placeholder="Email">
</div>
<input type="text" class="form-field" placeholder="Phone" >
<div id="bi-field-div">
<input type="text" class="form-field left-inline-field" placeholder="State / Province">
<input type="text" class="form-field right-inline-field" placeholder="Zip">
</div>
<input type="text" class="form-field" placeholder="Company Name">
<input type="text" class="form-field" placeholder="How did you hear about us?">
<input type="text" class="form-field" placeholder="Company Name">
<div id="tri-field-div">
<input type="text" class="form-field tri-field" placeholder="Experience">
<input type="text" class="form-field tri-field" placeholder="Interests">
<input type="text" class="form-field tri-field" placeholder="Referral?">
</div>
<div class="signup-btn-div">
<button id="signup-btn">
SIGN UP
</button>
</div>
<div id="privacy-policy">
Privacy Policy
</div>
</div>
</form>
CSS:
Form CSS
What it looks like in browser:
Form in browser
I want to show a bigger input text for my form like the <textarea rows="3"></textarea> does, so the input text be wrapped inside the box. Whatever I have tried, isn't working. I tried add a css class with height attribute but it doesnt working the way I want. I tried this with no successs.
<div class="form-group">
<label for="inputName" class="col-lg-2 col-sm-3 control-label">Info</label>
<div class="col-md-5 col-sm-4">
<input type="text" class="form-control myInput" name="info" required>
<textarea rows="3"></textarea>
</div>
</div>
Use input[type="text"] as the selector and change the font-size.
input[type="text"] {
font-size: 24px;
}
I'm a bit late to the game maybe but I was successful with this:
<textarea class="text-area text-box multi-line" data-val="true" data-val-length="Maximum = 2045 characters" data-val-length-max="2045" id="info" name="info" cols="40" rows="3"></textarea>
I have the following form, I want to have 3 items in a row.
Since it is auto generated I cant really change to much the html.
I cant have dynamic span for each column.
With the limitations I have here, is it possible to break the code bellow so Ill have 3 fields in a row?
http://fiddle.jshell.net/52VtD/446/
<div class="row-fluid">
<input id="Id" name="Id" type="hidden">
<div class="span1">
<label>
Email Address
</label>
<input class="form-control" id="Email" name="Email" type="text">
</div>
<div class="span1">
<label>
Full Name
</label>
<input class="form-control" id="FullName" name="FullName" type="text">
</div>
<div class="span1">
<label>
Active?
</label>
<input class="form-control" id="IsActive" name="IsActive" type="text">
</div>
<div class="span1">
<label>
Password
</label>
<input class="form-control" id="Password" name="Password" type="password">
</div>
<input name="Avatar.Id" type="hidden">
<div class="span1">
<label>
Upload image
</label>
<input class="form-control" id="Avatar.FileContent" name="Avatar.FileContent" placeholder="Select an image" type="file">
</div>
</div>
Sometimes, it helps not over thinking Bootstrap. Also note, this is Bootstrap 3 I'm using.
If you're looking to have "three items" in a row, including the labels, that can be created with 6 columns. 3 per label and 3 per input.
http://fiddle.jshell.net/pLSD9/1/
In this case, you don't use any of the built in form layouts like .form-inline. You use the Bootstrap grid and place your elements in it accordingly. Since Bootstrap gives it's form input elements 100% width, they'll fill the grid space.
I used the "sm" size grid so when the form gets to what Bootstrap considers a "small" size, it will stack the elements. Since JSFiddle brings the page down into windows,you might have to adjust the window size to see the grid layout.
I hope that helps!
Cheers!
You're going to break Bootstrap a lot, but if you could give the container an id and style it this way:
#form-container {
width: 700px;
}
#form-container .row-fluid .span1 {
float: left;
margin-right: 10px;
}
To get this result: http://fiddle.jshell.net/52VtD/448/
I do the following at <div class="offset3 span6"> with bootstrap-responsive.css:
<div class="control-group">
<label class="control-label" for="passport1">Series and passport number</label>
<div class="controls">
<input type="text" class="input-small inline" id="passport1" placeholder="" maxlength="4">
<input type="text" class="input-medium inline" id="passport2" placeholder="" maxlength="6">
<p class="help-block">Please input your passport details into two fields above</div>
</div>
</div>
But text label is not aligned with input fields (it is lower). How to fix it?
demo
You have a top padding on your label of 5px;
Consider overriding this inline or creating a more specific css selector and try again.
I would like to align the label of my search widget with the input text (they are slightly not aligned on all browsers). Any css tip ? thanks
This is my code:
<label for="edit-search" style="float: left;">Search</label>
<span class="views-widget">
<span id="edit-search-wrapper" class="form-item">
<input type="text" class="form-text" title="Enter the terms you wish to search for." value="" size="15" id="edit-search" name="search" maxlength="128">
</span>
</span>
</div>
<div style="position:relative;left:-10px;top:25px;">
<span class="views-widget">
<span id="edit-search-wrapper" class="form-item">
<input type="text" class="form-text" title="Enter the terms you wish to search for." value="" size="15" id="edit-search" name="search" maxlength="128">
</span>
</span>
</div>
The position relative will make the widget display where it should be in the natural document flow, then the left and top properties shift the widget around from that position. You are allowed negative values as there is no right and bottom property.
The solution is tuning the line-height values attributes.