I have a form with long labels over each input and I want the input centered underneath each label but I also need the inputs to stay inline. It should look like this below but the inputs should be centered under each long label.
Here is what I have but I am having trouble making the inputs center under the labels.
.question-container {
width: 1000px;
margin: 0 auto;
}
#questions {
margin: 5px 30px;
display: inline-block
}
<div class="form-inline">
<span id="questions">
<label>How much will your house cost?</label>
<input class="form-control" type="text" placeholder="input">
</span>
<span id="questions">
<label>What is the most you can pay monthly?</label>
<input class="form-control" type="text" placeholder="input">
</span>
<span id="questions">
<label>What is your Current Monthly Rent?</label>
<input class="form-control" type="text" placeholder="input">
</span>
</div>
<div id='centered'>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
Any help would be greatly appreciated!
Got it!
Simply had to add text-align:center; to the span
#questions {
margin:5px 30px;
display:inline-block;
text-align:center;
}
Related
In my project, I have a dialog div with four labels, four text input, one submit button and one shutdow button.
I want it appears like this:
AAAAAAAA:input text
BBBBBBBB:input text
CCCCCCCC:input text
DDDDDDDD:input text
submit shutdown
But acturally, it does not appear format, it likes this:
AAAAAAAA:input text
BBBBBBBB:
input text
CCCCCCCC:input text
DDDDDDDD:
submit input text
shutdown
It is ugly, I don't want it like that.
Here is my css and html code:
<style>
.addDiv{width:25%;height:20%;position:absolute;top:35%;left:35%;border:2px solid #ffffff;color:white;display:none;border-radius:15px;background:rgba(0,0,0,0.7);}
.firDiv{height:80%;width:100%}
.firDiv label{float:left;margin-left:10%;margin-top:2%;width:20%}
.firDiv input{float:right;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%}
.secDiv{height:20%;text-align:center;width:100%;margin-top:5%}
</style>
<div id="addCnt" class="addDiv">
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<label>AAAAAAA:</label><input type="text" name="prdSty"><br />
<label>BBBBBBB:</label><input type="text" name="diffLvl"><br />
<label>CCCCCCC:</label><input type="text" name="repTm"><br />
<label>DDDDDDD:</label><input type="text" name="fixTm"><br />
</div>
<div class="secDiv">
<input type="submit" value="add" /><input id="sdnBt" type="button" value="shutdown" >
</div>
</form>
</div>
Who can help me?
may be something like this?
* {
box-sizing: border-box;
}
.firDiv label {
padding: 5px;
text-align: right;
float: left;
width: 17%;
}
.firDiv .control {
float: left;
width: 83%;
}
.form-group {
clear: both
}
.secDiv {
margin-left: 16%;
padding-top:10px;
}
<form action="mng.php?act=add&table=IDC" method="POST">
<div class="firDiv">
<div class='form-group'>
<label>AAAAAAA:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>BBBBBBB:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>CCCCCCCC:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
<div class='form-group'>
<label>DDDDDDDDD:</label>
<div class='control'><input type="text" name="prdSty"></div>
</div>
</div>
<div class="secDiv">
<input type="submit" value="add" />
<input id="sdnBt" type="button" value="shutdown">
</div>
</form>
Two things you need to do here. First you have to clear the floats after the first Div completed. Second is apply float left to your input fields.
.firDiv input{float:left;border:1px solid #99ccff;background:rgba(0,0,0,0.35);margin-right:10%;
margin-top:2%;color:white;width:45%;}
.secDiv{height:20%;text-align:center;width:100%;margin-top:10%; clear:both;}
I have applied clear:both in secDiv and float:left in firDiv.
DEMO
add this to your css fiddle
.secDiv input {
width: 50%;
}
Rather try adding each input and label to their own div, something like this:
https://jsfiddle.net/ba0cL61b/5/
What this does is adds a div .row inside your firDiv div and inside the .row adds a div for your label and one for your input. So it would look like this:
<div class="row">
<div class="label">
<label>AAAAAAA:</label>
</div>
<div class="input">
<input type="text" name="prdSty">
</div>
</div>
This is a bit easier to understand and style.
I am trying to get a custom input style have a glyph icon inside and have a button on the right that says go.
Here is my js fiddle with it. jsfiddle
<div class="form-group">
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
The problem i am having is when i try to add the button on the right it makes the icon disappear when the input is clicked.
Using your fiddle I simply added an absolutely positioned button into your search box. Perhaps this is what you were looking for?
Added button in HTML:
<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
<button class="button-go">go</button>
Button's CSS:
.button-go {
position: absolute;
right: 0;
top: 0;
height: 30px;
}
https://jsfiddle.net/t6295xrd/
Here is a Demo for what i understood from you i just add the button to your fiddle and add this css to position it on right.
#Order_Search {
padding-right:20px;
}
.go-btn {
position: absolute;
right: 3px;
margin-left: -2.5px;
top: 2px
}
and this is the html
<div class="form-group">
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search All Orders" class="form-control" id="Order_Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
<button class="go-btn"> Go </button>
</div>
I have a page at http://zackelx.com/50/SO_a9.html with a BUY button. When you go to the page with Chrome and click the button a checkout form comes up where the blue Pay button is located correctly under the last input field:
But if you go to the page with Safari you get:
I'm using Safari 5.1.7 on a Windows 7 machine.
The HTML for the checkout form around the Pay button is:
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="size, color, etc."/><br />
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">123</span>
</button>
</div>
</div>
The browser should place div.button underneath the input#instructions element, and Chrome does that. But Safari places it a few pixels down from the top of the input element, as if div.button had a style something like position:relative; top:-20px. But there's nothing like that, and using the Safari inspector I don't see anything that would keep div.button from being placed completely under input#instructions.
Does anyone see what's going on here?
whole code for the pop up form:
<form action="" method="POST" id="checkout_form" autocomplete="off">
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
css:
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
You are seeing Safari-specific rendering issues related to the positioning used.
Solution:
You don't need to change any of the HTML, just overwrite the CSS by placing the following CSS at the end of your stylesheet:
I tested it in Safari (Windows) v5.1.7, and it seems to work fine.
For the #checkout_form element, top: auto/left: auto are used to reset the positioning that was previously being used. I gave the element a width of 100%, and used padding to position the elements. box-sizing: border-box is used to include the padding in the element's width calculations. The vendor prefixes are used to support older browsers (-webkit- in Safari's case).
For the parent button wrapper element and the credit card image, margin: 10px 0 0 50px was essentially used to displace the element and centered it below the field elements. It's worth pointing out that text-align: center on the parent #checkout_form element was being used to center the elements.
I presume that you wanted the #padlock element hidden, thus display: none.
#checkout_form {
top: auto;
left: auto;
width: 100%;
display: block;
padding: 25px 38px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
#checkout_form .button,
img#creditcards {
margin: 10px 0 0 50px;
}
#checkout_form .button button {
position: static;
}
#checkout_form img#padlock {
display: none;
}
You have style for the form element
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
display:inline; is what is causing the problem, and makes the button look like its floating. and not correctly rendered in safari. I dont know the cause of the issue in safari, but I have a workaround which works(I tried on on your website and it perfectly works on chrome and safari).
Change your markup a little, add a div tag inside the form to contain only the labels and the inputs but not the button you want to render on the next line.
<form action="" method="POST" id="checkout_form" autocomplete="off">
<div style="display: inline;">
<label id="email">email</label>
<input type="email" size="20" id="checkout_form_email" class="email generic" placeholder="john#comcast.net" required="" autocomplete=""><br>
<label id="phone">phone</label>
<input type="text" size="20" id="checkout_form_phone" class="phone generic" placeholder="(209) 322-6046" autocomple="" required=""><br>
<label id="name">name</label>
<input type="text" size="20" id="checkout_form_name" class="name generic" placeholder="John Doe" autocomplete="" required=""><br>
<label id="street">street</label>
<input type="text" size="20" id="checkout_form_street" class="street generic" placeholder="123 Maple St." autocomplete="" required=""><br>
<label id="city">city</label>
<input type="text" size="20" id="checkout_form_city" class="city generic" placeholder="San Jose" autocomplete="" required=""><br>
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
</div>
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
I have wrapped your form with a div with style display-inline,
and add a style display:inline-block to the div in which you have wrapped your button.
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
remove the position relative css properties and add margin in your css.
**Previous code:**
#checkout_form button {
/* position:relative; */
/* top:9px; */
/* left:71px; */
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
}
**New css:**
#checkout_form button {
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
margin: 9px 0 0 71px;
}
I currently have a simple form with a label positioned above the input box and added a second label element to use for a hint/error message.
<form id="registerForm" method="POST" action="register_post.php">
<p class="form-registerUserName">
<label for="registerUserName">User Name</label>
<span class="required">*</span>
<input
id="registerUserName"
type="text"
size="24"
maxlength="24"
value="<?php echo $_SESSION['registerUserName'];?>"
onkeyup="validateName()"
onblur="validateName()"
>
<label class="hint" for="registerUserName">hint error</label>
</p>
</form>
What would be the best way (css-wise) to position the second label element to the right of the input box a fixed distance and centered vertically to the box? Is this the best way to add an element for a hint to the html?
I am trying to make it look like the first example on this page: https://ux.stackexchange.com/questions/26173/what-is-best-practice-for-designing-form-error-messages
Thanks in advance.
There are many ways, I like this one: (Added a wrapper to input element in HTML)
p > label, p > span {
display: table-cell;
vertical-align: middle;
}
p {
display: table;
}
p > .input-wrapper + label {
padding-left: 10px;
max-width: 200px;
}
Working Fiddle
Updated Fiddle
I would do it by putting the to labels in a wrapper div then floating them left to make them go side by side, then use padding on the 2nd label to adjust the spacing like so.
<form id="registerForm" method="POST" action="register_post.php">
<div id="wrapper">
<p class="form-registerUserName">
<label for="registerUserName">User Name</label>
<span class="required">*</span>
<input
id="registerUserName"
type="text"
size="24"
maxlength="24"
value="<?php echo $_SESSION['registerUserName'];?>"
onkeyup="validateName()"
onblur="validateName()"
>
<label class="hint" for="registerUserName">hint error</label>
</div>
</p>
And the CSS
#wrapper{
float:left;
}
.hint{
padding-left:20px;
}
Hope this helps
Thanks for the replies.
First method with CSS table elements worked but too confusing.
So I ended up just placing upperLabel elements in a wrapper and then -> display: block; on those.
Then just added margin to .hint.
So..
<form id="registerForm" method="POST" action="register_post.php">
<p class="form-registerUserName">
<div class="upperLabel">
<label for="registerUserName">User Name</label>
<span class="required">*</span>
</div>
<input
id="registerUserName"
type="text"
size="24"
maxlength="24"
value="<?php echo $_SESSION['registerUserName'];?>"
onkeyup="validateName()"
onblur="validateName()"
>
<label class="hint" for="registerUserName">hint error</label>
</p>
</form>
CSS..
.upperLabel {
display: block;
}
.hint {
margin-left: 12px;
color: red;
}
I know this is very basic.
Thanks all for the help.
I have the following code and I'm trying to get both of these inputs aligned centered. Where is the problem in the code?
<div class='form'>
<form class="form-inline" role="form">
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">#</span>
<input class="text-center form-control" align="middle" placeholder="username" name="username" type="text">
</div>
<div class="text-center input-group input-group-lg">
<span class="input-group-addon">P</span>
<input class="text-center form-control" align="middle" placeholder="password" name="password" type="password">
</div>
</form>
</div>
<style>
.text-center {
width: 50%;
}
div {
text-align:center;
}
</style>
Both inputs are still aligned to the left.
Inputs are not text, and cannot be centered using text-align. Target the element directly in your css, like so:
input {
display: block;
margin: 0 auto;
}
This will center the inputs within the parent element.