Busy on a game involving buttons. Having 2 questions about problems I stumbled upon.
Code:
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
}
<html>
<head>
</head>
<body>
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</body>
</html>
Questions:
Why do the button misalign when I put in a value in the the button? Dev tools also says it still the same size (50px 50px) so why does it change position?
How can I style the CSS to have zero distance bewteen the buttons (in other words: the borders of the buttons touch). I already tried to set padding/margin of html/body/input but none of these seems to work.
Why are the buttons with text being pushed down?
So there's a bit at play here. Text and inline elements vertically-align to the baseline by default. The baseline is a value determined by the line-height of the element, though an element without a line-height will determine a "reasonable" value[1] - in the case of an empty element, this will be 0. However when you add text, the element is then given a line-height and moved down by that amount.[2]
A simple solution is to force the inputs to render with the same alignment, text or not, by applying vertical-align: top.
Why is there space between the buttons?
Inline elements (and inline-block elements like your inputs) will naturally align side-by-side, however they behave similarly to text[3]. Much like if you were to put a line-break between two letters in your HTML, a line-break between inline elements will add a single space between them.
Hypothetically, if you were to put all of your inputs on one line (without spaces), it would solve your issue:
<input type="button" value="these" /><input type="button" value="are" /><input type="button" value="touching" />
<br><br>
<input type="button" value="these" />
<input type="button" value="are" />
<input type="button" value="not" />
Though I don't suggest that method - it's merely for demonstration purposes.
So what's the solution?
Well, you have some options. Choose the one that you think would work best for you.
Solution 1: Wrap the inputs in a container and apply font-size: 0 to it. The spaces will still be there, but the font-size: 0 ensures they aren't visible.
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
vertical-align: top;
font-size: 12px;
}
.container {
font-size: 0;
}
<div class="container">
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>
Solution 2: Bypass the triviality of inline elements and make use of display: block with float.
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
font-size: 12px;
float: left;
display: block;
}
.row {display: block;}
.row::after {
display: block;
content: '';
clear: both;
}
<div class="row">
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
</div>
<div class="row">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>
<div class="row">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>
Solution 3: Use a more modern approach, like flexbox.
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height: 50px;
width: 50px;
padding: 0px;
margin: 0px;
vertical-align: top;
font-size: 12px;
}
.container {
display: flex;
flex-wrap: wrap;
width: 150px;
}
<div class="container">
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</div>
Sources
1: "normal: Tells user agents to set the computed value to a "reasonable" value"
2: "For inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height'.
3: "Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context."
"Why do the button misalign when I put in a value in the the button?"
The default value for elements with text content vertical-align is a baseline, so you need to specify it (in my case I use vertical-align: middle).
"How can I style the CSS to have zero distance bewteen the buttons (in other words: the borders of the buttons touch)"
I followed a little hacky way and set a negative margin-left value to get buttons without space between them. I have selected specific items using input:nth-child(2n) and input:nth-child(4n - 1) selectors and gave margin-left: -4px; to them.
Here is my solution:
* {
margin: 0;
padding: 0;
}
input {
background-color: #e7e7e7;
border: solid;
border-width: 1px;
text-align: center;
height:50px;
width:50px;
vertical-align: middle
}
input:nth-child(2n) {
margin-left: -4px;
}
input:nth-child(4n - 1) {
margin-left: -4px;
}
<html>
<head>
</head>
<body>
<input type="button" value="foo">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
<br/>
<input type="button" value="">
<input type="button" value="">
<input type="button" value="">
</body>
</html>
Feel free to ask, if anything isn't clear!
For question two, you can try the border-spacing method.
For example:
input {
border-collapse: separate;
border-spacing: 0px 0px;
}
Related
I have this code:
.hidden_element {
height: 1px;
width: 1px;
overflow: hidden;
}
<form action="">
<label for="file">
<button type="button" class="button red">Choose File</button>
</label>
<div class="hidden_element">
<input type="file" name="video" id="file" />
</div>
</form>
The problem is when I click choose file nothing happens.
Change your button like <button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>
.hidden_element {
height: 1px;
width: 1px;
overflow: hidden;
}
<form action="">
<label for="file">
<button type="button" onclick="document.getElementById('file').click()" class="button red">Choose File</button>
</label>
<div class="hidden_element">
<input type="file" name="video" id="file" />
</div>
</form>
The label element applies to one input only: since it has one as a child (the button is an input element), it applies to it instead of the file-input as you hoped.
Just remove the button, maybe replace it with a span and style it as you wish, and clicking the label will open the file picker. No javascript needed! :)
.hidden_element {
height: 1px;
width: 1px;
overflow: hidden;
}
.button {
display: inline-block;
box-sizing: border-box;
border: 1px solid #aaa;
background-image: linear-gradient(to bottom, #eee, #ccc);
padding: 0.1em 0.2em;
cursor: pointer;
}
<form action="">
<label for="file">
<span class="button red">Choose File</span>
</label>
<div class="hidden_element">
<input type="file" name="video" id="file" />
</div>
</form>
I do not see the purpose of putting the button as a label. Either use a button or a submit to process your input (file upload). You should not hide your 'input file' tag. You really need two things for the user: the 'input file' tag to allow the user to choose the file he wants to upload and then a way to perform an action by submitting the form or perhaps an ajax call. However, since you are just learning this process, I recommend, just performing a simple submit and for you to write the code on the backend that will handle uploading the file. Here is a sample of my html code:
<form method="post" action="uploadFile.php">
<input type="file" name="video" id="file" />
<br /><br />
<input type="submit" value="upload file">
</form>
I am trying to create a simple page navigation consisting of three parts:
A few previous page numbers (if any)
The current page number (this must be centered)
A few upcoming page numbers (if any)
The important thing is that the current page number is always horizontally centered within the parent container. The other two parts should take up the remaining horizontal space evenly.
This JSFiddle illustrates my two attempts at solving this problem.
Solution 1: use text-align: center. This achieves the desired result but only if both sides are equal in width. If not the current page number will not be in the center.
HTML
<div class="container">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
<input type="text" size="5" maxlength="5" value="50">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
CSS
.container, input {
text-align: center;
}
Solution 2: use manually specified widths to distribute the horizontal space evenly. This effectively centers the current page number under all circumstances but it requires you to hardcode widths.
HTML
<div class="container">
<div class="left">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
</div>
CSS
.left {
width: 40%;
float: left;
text-align: right;
}
.right {
width: 40%;
float: right;
text-align: left;
}
.center {
width: 20%;
margin-left: 40%;
}
Neither of these solutions really do what I want. Is there any way to have the current page number centered while allowing the other elements to align to its natural size, rather than to an arbitrary pixel or percentage width?
Try this CSS table layout follows.
.container {
width: 100%;
display: table;
border-collapse: collapse;
table-layout: fixed;
}
.left, .center, .right {
display: table-cell;
border: 1px solid red;
text-align: center;
}
.center {
width: 50px;
}
<div class="container">
<div class="left">
<input type="button" value="47">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
</div>
jsfiddle
You should use flex and float properties together, checkout my solution:
.container {
display: -webkit-flex; /* Safari */
display: flex;
}
.container, input {
text-align: center;
}
.container:after {
content:"";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
left: 50%;
border-left: 2px dotted #ff0000;
}
.left {
display: inline-block;
flex: 1;
}
.left input {
float: right;
}
.right {
display: inline-block;
flex: 1;
}
.right input {
float: left;
}
.center {
display: inline-block;
}
<div class="container">
<div class="left">
<input type="button" value="48">
<input type="button" value="49">
</div>
<div class="center">
<input type="text" size="5" maxlength="5" value="50">
</div>
<div class="right">
<input type="button" value="51">
<input type="button" value="52">
<input type="button" value="53">
</div>
</div>
You can use the CSS property display with the value flex in the wrapper, and the property flex in the children.
To learn more about it, check the following resource: A Complete Guide to Flexbox
Here is an example:
.wrapper {
display: flex;
}
.wrapper > div {
text-align: center;
flex: 1;
border: 1px solid #000;
}
<div class="wrapper">
<div>
<button>1</button>
<button>2</button>
</div>
<div>
<button>3</button>
</div>
<div>
<button>4</button>
<button>5</button>
<button>6</button>
</div>
</div>
Here is a solution you might consider:
Use hidden buttons to always maintain the same number of tags on left and right side
<div class="container">
<input style="visibility: hidden" type="button" value="0">
<input style="visibility: hidden" type="button" value="0">
<input style="visibility: hidden" type="button" value="0">
<input type="text" size="5" maxlength="5" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
Instead of specifying the width in % you can use CSS calc to split the full width in 3 parts:
[50% - 25px][50 px][50% - 25px]
Then right-align the left part, left align the right part and you're done. When using SASS or LESS you only need to specify the width of the center part.
.container {
width: 100%;
white-space: nowrap;
overflow: hidden;
}
.container > * {
display: inline-block;
}
.container .left {
width: calc(50% - 25px);
text-align: right;
}
.container > input {
width: 50px;
margin: 0px;
text-align: center;
}
.container .right {
width: calc(50% - 25px);
text-align: left;
}
<div class="container">
<div class="left">
<input type="button" value="48" />
<input type="button" value="49" />
</div>
<input type="text" maxlength="5" value="50" />
<div class="right">
<input type="button" value="51" />
<input type="button" value="52" />
<input type="button" value="53" />
</div>
</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 have two queries as stated below:-
1) I want to move the blue colored rectangular box (containing username and password text fields) to the center of the page. I tried using   to change the location of the rectangular box but strange, it is not moving at all.Is there any parameter in HTML which can help me shift this box to the center of the page? Can anyone suggest me how can I achieve this?
2) The BORDER = 8 parameter is not working as here I want to set a dark black colored border around my rectangular box. Can anyone suggest what can be the cause of this issue?
To replicate the issue which I am facing, copy the below codes in a .TXT file and save it as .HTML file. Open in IE or Firefox browser to see the issue which I am getting.
Code:
<html>
<form id="login" action="index.html">
<div style="width: 450px; height: 250px; background: blue;BORDER=8"><br/><br/><br/>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br/> <br/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/> <br/><br/><br/>
<input type="submit" value="Submit">
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form"/>  
</div><br/><br/>
</form>
</html>
if you only want to center horizontally try with: margin:0 auto;
http://jsfiddle.net/P2rQK/
<div style="width: 450px; height: 250px; background: blue;margin:0 auto;">
<form id="login" action="index.html">
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18" />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
It is bad to use to position elements. also <br /> is not a "clean" way.
If you want truly dynamic positioning, use the below which is not reliant on specifying dimensions. Critically it uses a CSS tabulated layout to do the position calculations. The border can be achieved by giving your form a border:8px solid black;
You should also move your styles out from being specified inline- and use CSS to control your layout instead of reliance on so much HTML (such as ).
Demo Fiddle
HTML
<div class='table'>
<div class='cell'>
<form id="login" action="index.html">
<label>Username:</label>
<input type="text" name="userid" size="18" maxlength="18" />
<br />
<label>Password :</label>
<input type="password" name="pswrd" size="18" maxlength="18" />
<br />
<input type="submit" value="Submit" />
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</form>
</div>
</div>
CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
label {
font-weight:bold;
margin-right:10px;
}
.table {
display:table;
text-align:center;
width:100%;
height:100%;
table-layout:fixed;
}
.cell {
display:table-cell;
vertical-align:middle;
}
form {
display:inline-block;
border:8px solid black;
width: 450px;
padding:50px 0;
background: blue;
}
input {
margin-bottom:15px;
}
although this is not a js-question:
<div style="position: absolute; left: 50%; margin-left: 225px; width: 450px; height: 250px; background: blue; border: 8px solid black"> content </div>
position absolute, left 50% and margin-left: -225px (half width) will position the box in the middle of the screen.
border: 8px solid black is the right way to define a border of 8px width
You will need to add margin: 0 auto; to your blue box.
Look at this Demo
<div style="border-width:8px;border-color:red;border-style:solid;width:450px;height:1050px;background-color:gold;"> content </div>
I would advise using a lot more CSS and less use of the and <br>.
` <html>
<style>
#login {
left: 50%;
width: 200px;
margin-left: -225px;
position: relative;
}
div {
width: 450px;
height: 250px;
background: blue;
border:8px solid #000;
padding:20px;
}
</style>
<form id="login" action="index.html">
<div>
<strong>Username: </strong> <input type="text" name="userid" size="18" maxlength="18"/><br>
<strong>Password : </strong> <input type="password" name="pswrd" size="18" maxlength="18"/><br>
<input type="submit" value="Submit"><br>
<input type="reset" value="Cancel" onclick="myFunction()" value="Reset form" />
</div>
</form>
</html>`
Try playing around with margins to get the positioning correct.
I made a login box using Bootstrap 3.0.3. On the second line, the password input box’s and check box”s (labelled Auth) heights are different. On mobile, the difference is even more noticeable.
How can I make their heights match?
Bootply
<form name="fhead" method="post" onsubmit="return fhead_submit(this);" autocomplete="off" role="form" class="form-inline">
<div id="outlogin_box" name="outlogin_box">
<input type="hidden" name="url" value="<?=$outlogin_url?>">
<input type="text" class="form-control input-sm" name="mb_id" maxlength="20" itemname="id" placeholder="login id">
<div class="input-group"><!-- needs height alignment -->
<input type="password" class="form-control input-sm" name="mb_password" id="outlogin_mb_password" maxlength="20" itemname="password" placeholder="password">
<span class="input-group-addon">
<div class="checkbox">
<label>
<input type="checkbox" name="auto_login" title="Remember me" value="1" onclick="if (this.checked) { if (confirm('자동로그인을 사용하시면 다음부터 회원아이디와 패스워드를 입력하실 필요가 없습니다.\n\n\공공장소에서는 개인정보가 유출될 수 있으니 사용을 자제하여 주십시오.\n\n자동로그인을 사용하시겠습니까?')) { this.checked = true; } else { this.checked = false; } }">
Auto
</label>
</div>
</span>
</div>
<div class="input-group">
<button type="submit" class="btn btn-success btn-sm btn-group-justified" >Login</button>
</div>
<div class="input-group">
<div class="btn-group btn-group-justified">
<a class="btn btn-default btn-sm" title="Register" href="<?=$g4[bbs_path]?>/register.php">Register</a>
<a class="btn btn-default btn-sm" title="회원 id, password 찾기" href="javascript:win_password_lost();">아이디찾기</a>
</div>
</div>
</div>
</form>
Change
<input class="form-control input-sm" name="mb_password" ...
to
<input class="form-control" name="mb_password" ...
http://www.bootply.com/98872
You have modified the height of the input by adding a class "input-sm".
Try this very simple:
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
input[type=radio] {
bottom: 2px;
}
You can set fixed width and height values for HTML textboxes/checkboxes in CSS by doing the following...
input[type="text"] {
width: 10%;
height:3%;
}
input[type="password"] {
width: 10%;
height:3%;
}
input[type="checkbox"] {
height:2%;
}
You can also set them using px instead of percentages.
Hopefully setting a fixed height and width should resolve your conflicting size problems.
Try overriding bootstrap CSS with this:
.input-group-addon .checkbox {
margin: 8px 5px 0 !important;
}
.input-group-addon {
padding:0 !important;
}
change your css of checkbox class display which is display : inline-block to display: inline and the try it
.form-inline .radio,.form-inline .checkbox{display:inline-block;padding-left:0;margin-top:0;margin-bottom:0}
to
.form-inline .radio,.form-inline .checkbox{display:inline;padding-left:0;margin-top:0;margin-bottom:0}
in bootstrap.min.css