I'm trying to make a login form with two input fields with an inset padding, but they end up exceeding the parent's bounds. What's causing this?
JSFiddle snippet: http://jsfiddle.net/4x2KP/
#mainContainer {
line-height: 20px;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: rgba(0,50,94,0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0,0,0,0.2);
}
.loginForm {
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
float: left;
margin-right: 3px;
}
.spacer {
padding-bottom: 10px;
}
/* ELEMENT OF INTEREST HERE! */
input[type=text],
input[type=password] {
width: 100%;
height: 20px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24,0.1);
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background:rgb(242, 242, 242) !important;
}
input[type=submit]:hover {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.3),
inset 0 -10px 10px rgba(255,255,255,0.1);
}
<div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text"></input></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password"></input></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember"></input>
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in"></input>
</div>
</form>
</div>
</div>
According to the CSS basic box model, an element's width and height are applied to its content box. Padding falls outside of that content box and increases the element's overall size.
As a result, if you set an element with padding to 100% width, its padding will make it wider than 100% of its containing element. In your context, inputs become wider than their parent.
You can change the way the box model treats padding and width. Set the box-sizing CSS property to border-box to prevent padding from affecting an element's width or height:
border-box : The width and height properties include the padding and border, but not the margin... Note that padding and border will be inside of the box.
Note the browser compatibility of box-sizing (IE8+).
At the time of this edit, no prefixes are necessary.
Paul Irish and Chris Coyier recommend the "inherited" usage below:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
For reference, see:
* { Box-sizing: Border-box } FTW
Inheriting box-sizing Probably Slightly Better Best-Practice.
Here's a demonstration in your specific context:
#mainContainer {
line-height: 20px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: rgba(0, 50, 94, 0.2);
margin: 20px auto;
display: table;
-moz-border-radius: 15px;
border-style: solid;
border-color: rgb(40, 40, 40);
border-radius: 2px 5px 2px 5px / 5px 2px 5px 2px;
border-radius: 2px;
border-radius: 2px 5px / 5px;
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
}
.loginForm {
width: 320px;
height: 250px;
padding: 10px 15px 25px 15px;
overflow: hidden;
}
.login-fields > .login-bottom input#login-button_normal {
float: right;
padding: 2px 25px;
cursor: pointer;
margin-left: 10px;
}
.login-fields > .login-bottom input#login-remember {
float: left;
margin-right: 3px;
}
.spacer {
padding-bottom: 10px;
}
input[type=text],
input[type=password] {
width: 100%;
height: 30px;
padding: 5px 10px;
background-color: rgb(215, 215, 215);
line-height: 20px;
font-size: 12px;
color: rgb(136, 136, 136);
border-radius: 2px 2px 2px 2px;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
box-sizing: border-box;
}
input[type=text]:hover,
input[type=password]:hover,
label:hover ~ input[type=text],
label:hover ~ input[type=password] {
background: rgb(242, 242, 242);
!important;
}
input[type=submit]:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
.login-top {
height: auto;/*85px;*/
}
.login-bottom {
padding: 35px 15px 0 0;
}
<div id="mainContainer">
<div id="login" class="loginForm">
<div class="login-top">
</div>
<form class="login-fields" onsubmit="alert('test'); return false;">
<div id="login-email" class="login-field">
<label for="email" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">E-mail address</label>
<span><input name="email" id="email" type="text" /></span>
</div>
<div class="spacer"></div>
<div id="login-password" class="login-field">
<label for="password" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Password</label>
<span><input name="password" id="password" type="password" /></span>
</div>
<div class="login-bottom">
<input type="checkbox" name="remember" id="login-remember" />
<label for="login-remember" style="-moz-user-select: none;-webkit-user-select: none;" onselectstart="return false;">Remember my email</label>
<input type="submit" name="login-button" id="login-button_normal" style="cursor: pointer" value="Log in" />
</div>
</form>
</div>
</div>
Alternatively, rather than adding padding to the <input> elements themselves, style the <span> elements wrapping the inputs. That way, the <input> elements can be set to width:100% without being affected by any additional padding. Example below:
#login-form {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: rgba(0, 50, 94, 0.2);
margin: 20px auto;
padding: 10px 15px 25px 15px;
border: 4px solid rgb(40, 40, 40);
box-shadow: 0 5px 10px 5px rgba(0, 0, 0, 0.2);
border-radius: 2px;
width: 320px;
}
label span {
display: block;
padding: .3em 1em;
background-color: rgb(215, 215, 215);
border-radius: .25em;
border: 1px solid rgb(114, 114, 114);
box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
margin: 0 0 1em;
}
label span:hover {
background: rgb(242, 242, 242);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 10px rgba(255, 255, 255, 0.1);
}
input[type=text],
input[type=password] {
background: none;
border: none;
width: 100%;
height: 2em;
line-height: 2em;
font-size: 12px;
color: rgb(136, 136, 136);
outline: none;
}
.login-bottom {
margin: 2em 1em 0 0;
}
input#login-button {
float: right;
padding: 2px 25px;
}
input#login-remember {
float: left;
margin-right: 3px;
}
<form id="login-form">
<label>E-mail address
<span><input name="email" type="text" /></span>
</label>
<label>Password
<span><input name="password" type="password" /></span>
</label>
<div class="login-bottom">
<label>
<input type="checkbox" name="remember" id="login-remember" />Remember my email
</label>
<input type="submit" name="login-button" id="login-button" value="Log in" />
</div>
</form>
The other answers seem to tell you to hard-code the width or use a browser-specific hack. I think there is a simpler way.
By calculating the width and subtracting the padding (which causes the field overlap). The 20px comes from 10px for left padding and 10px for right padding.
input[type=text],
input[type=password] {
...
width: calc(100% - 20px);
}
If all above fail, try setting the following properties for your input, to have it take max space but not overflow:
input {
min-width: 100%;
max-width: 100%;
}
Try changing the box-sizing to border-box. The padding is adding to width of your input elements.
See Demo here
CSS
input[type=text],
input[type=password] {
width: 100%;
margin-top: 5px;
height: 25px;
...
}
input {
box-sizing: border-box;
}
+box-sizing
try code this
*, ::after, ::before {
box-sizing: border-box;
}
Padding is added to the overall width. Because your container has a pixel width, you are better off giving the inputs a pixel width too, but remember to remove the padding and border from the width you set to avoid the same issue.
This is tricky, and situational. There is a bit of confusion in these comments, let's summarize the solutions:
The first valid approach is explained by showdev in the accepted answer. BUT, this is not final.
In fact: if you add some padding to the input, now it works. If you add some margin it is still overflowing. It seems that box-sizing is ignored. Also fiddling with min-width and max-width is useless.
To apply margin, the only working solution is explained by Al Zziwa, using calc() to reduce the width by the amount of margin. For example, adding margin to left and right:
input {
margin: 0 20px;
width: calc(100% - 40px);
}
If you don't like this solution, the workaround is to avoid the margin in the input, instead use a wrapper where you apply padding or margin.
You also have an error in your css with the exclamation point in this line:
background:rgb(242, 242, 242);!important;
remove the semi-colon before it. However, !important should be used rarely and can largely be avoided.
I tried these solutions but never got a conclusive result. In the end I used proper semantic markup with a fieldset. It saved having to add any width calculations and any box-sizing.
It also allows you to set the form width as you require and the inputs remain within the padding you need for your edges.
In this example I have put a border on the form and fieldset and an opaque background on the legend and fieldset so you can see how they overlap and sit with each other.
<html>
<head>
<style>
form {
width: 300px;
margin: 0 auto;
border: 1px solid;
}
fieldset {
border: 0;
margin: 0;
padding: 0 20px 10px;
border: 1px solid blue;
background: rgba(0,0,0,.2);
}
legend {
background: rgba(0,0,0,.2);
width: 100%;
margin: 0 -20px;
padding: 2px 20px;
color: $col1;
border: 0;
}
input[type="email"],
input[type="password"],
button {
width: 100%;
margin: 0 0 10px;
padding: 0 10px;
}
input[type="email"],
input[type="password"] {
line-height: 22px;
font-size: 16px;
}
button {
line-height: 26px;
font-size: 20px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Log in</legend>
<p>You may need some content here, a message?</p>
<input type="email" id="email" name="email" placeholder="Email" value=""/>
<input type="password" id="password" name="password" placeholder="password" value=""/>
<button type="submit">Login</button>
</fieldset>
</form>
</body>
</html>
In your parent div set .parent { height: fit-content; }
I leave this here in case it may help someone even if it's not the case in the code of the question but I think it can be related to the question subject itself.
I just stumbled in an occasion I was using a form styled with CSS grids and the inputs were overflowing.
The solution has been to add:
grid-template-columns: 100%
as the default auto value was causing the overflow.
Padding is essentially added to the width, therefore when you say width:100% and padding: 5px 10px you're actually adding 20px to the 100% width.
Do you want the input fields to be centered?
A trick to center elements: specify the width of the element and set the margin to auto, eg:
margin : 0px auto;
width:300px
A link to your updated fiddle:
http://jsfiddle.net/4x2KP/5/
Simply: How to get rid of the light blue gap, so that "new customer account application" and Name/Street/City sections are adjoining?
As I am a beginner, any other suggestions to my code are welcome, thanks.
I cant submit this without adding more information because it says there is too much code, not enough writing. Sorry to add this paragraph.
<!DOCTYPE html>
<html>
<head>
<style>
#wrap {
background-color: #83caff;
width: 1024px;
margin: 0 auto;
color: white;
}
.darkblue{
background-color: #004586;
padding-left: 20px;
line-height: none;
margin: none;
}
.paddingleftstandard {
padding-left: 20px;
padding-bottom: 10px;
}
.paddingrightstandard {
padding-right: 20px;
margin-right: 20px;
}
.darkbluefordata{
background-color: #336699;
line-height: 1.8em;
font-size:0.6em;
}
.submitbutton {
padding: 4px 6px 4px !important;
font-size: 18px !important;
background-color: #3b5998;
font-weight: bold;
text-shadow: 1px 1px #3b5998;
color: #ffffff;
border-radius: 3px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #3b5998;
cursor: pointer;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
</style>
</head>
<body>
<div id="wrap">
<h1 class="darkblue">New Customer Account Application<h1>
<form class="paddingleftstandard darkbluefordata" action="/action_page.php">
Name
Street
City
<br>
<input type="text" name="Name" value="">
<input type="text" name="Street" value="">
<input class="paddingrightstandard" type="text" name="City" value="">
<input class="submitbutton" type="submit" value="Submit Application">
</form>
<p> </p>
<footer>
</footer>
</div>
</body>
</html>
Please add a new class.
h1 {
margin: 0;
}
While the solution presented by #Shoaib will achieve the desired effect, the underlying issue is that there is some incorrect HTML and CSS. To fix this, the W3 validator is an invaluable tool: https://validator.w3.org/ .
Regarding your current problem, it points out that the h1 tag is not closed due to a missing backslash, leading to the closing tag being interpreted as another h1 opening tag. This, in combination with the invalid none rather than 0 for margin leads to both the title and the form having a top and bottom margin, creating the blue gap.
As for other tips, your form formatting (label positioning) could be improved by doing it via CSS as well. Assign the input fields and labels equal width, and they'll line up better.
I want to achieve something like below
How do I style the html and css?
Hello you can enclose the two input fields in a div then add margins inside. Here's a summary of what I did;
put input fields inside a div
remove borders from the input fields
add margin on top & bottom of the input fields (this would be the spacing on top and bottom of the separator)
add a border on the right of the first input field
Do run the snippet below, thanks.
$(".input-group-wrapper input").on("focus", function() {
$(this).parent().addClass("focus");
});
$(".input-group-wrapper input").on("focusout", function() {
$(this).parent().removeClass("focus");
});
.input-group-wrapper {
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.1);
display: inline-block;
transition: 0.2s;
width: 100%;
}
.input-group-wrapper>.first,
.input-group-wrapper>.second {
border: none;
line-height: 30px;
display: inline;
margin: 6px 0px 6px 0px;
padding: 0px 8px 0px 8px;
}
.input-group-wrapper>.first {
width: 60%;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.input-group-wrapper>.second {
width: 30%;
}
.input-group-wrapper>.first:focus,
.input-group-wrapper>.first:active,
.input-group-wrapper>.second:focus,
.input-group-wrapper>.second:active {
outline: none;
}
.focus {
border: 2px solid rgba(0, 100, 200, 0.6);
}
<div class='input-group-wrapper'>
<input class='first' placeholder='e.g. Read every day p3 #goals #learning' />
<input class='second' value='Aug 4 2018' />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
To achieve this look, you'll want to use a margin on one of them.
I have my code and a Code Pen linked below:
.modified{
height: 30px;
border-radius: 2px;
border: 1px solid lightgray;
box-shadow: none;
padding: 3px 6px;
}
.modified.right{
margin-left: -10px;
width: 125px;/* Alternatively use % or vw */
}
.modified.right::placeholder{
color: black;
}
<input type="text" class="modified" placeholder="Just Test Me"/>
<input type="text" class="modified right" placeholder="I Am Testing" />
Codepen Example
I hope this helps!
I have an issue with rendering my website for IE, Chrome and Opera. In Firefox the positioning works well:
while in the other browsers it looks like crap:
I have tried several positioning and padding options, but no luck. The problems appeared as I replaced the drop down menu with a jQuery replacement to enhance it graphically. The original dropdown is still there but with the css-option "display: none". I'd be thankful for a hint!
Here is the css:
This is the big blue box
.searchHomeForm a, .searchHomeForm a:hover {
color:#000000;
}
A invisible box around the three elements
div.searchHomeForm , .searchform {
height: 37px;
margin-left: auto;
margin-right: auto;
}
The white search bar
.search_bar {
position: inherit;
height: 25px;
letter-spacing: 0.02em;
line-height: 25px;
padding: 9px 0 0px 9px;
width: 390px;
border: 1px solid #95B6D6;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.11) inset;
border-radius: 0.25em 0 0 0.25em;
}
the jQuery Dropdown replacement
#searchformReplacement {
background: #EBEBEB;
padding: 0px 1px 5px 0;
margin-bottom: 3px;
border-top: 1px solid #95B6D6;
border-bottom: 1px solid #95B6D6;
width: 109px;
position: inherit;
}
the find button
.find_button {
background: url("../images/lupevufindsearchsubmit1.png") no-repeat scroll #bBbBbB;
-moz-border-radius: 0.25em;
border-radius: 0 0.25em 0.25em 0;
position: inherit;
height: 36px;
line-height: 36px;
margin: 0px 0 3px -1px;
padding: 4px 10px 4px 10px;
width: 60px;
border-top: 1px solid #95B6D6;
border-right: 1px solid #95B6D6;
border-bottom: 1px solid #95B6D6;
border-left: none;
box-shadow: 2px 2px 5px rgba(76, 133, 187, 0.50) inset;
transition: all 0.2s ease-in-out 0s;
}
Try removing position: inherit from the .search_bar {}, #searchformReplacement {}and .find_button {} add display:inline-block for each
or add display:inline and float:left for each. You may have to clear floats if you use float:left
maybe use float: left; on the three elemetns next to each other?
I made you a little example to have the required position, I'm using the inline-block propriety (and I love it) :
Html
<div id="container">
<input type="text" class="inline-block" />
<div class="inline-block">
Your custom select
</div>
<button type="submit" class="inline-block">Search</button>
</div>
CSS
.inline-block {
display:inline-block;
*display:inline; /*IE hack*/
*zoom:1; /*IE hack*/
}
#container {
background:lightBlue;
width:300px;
margin:0 auto;
text-align:center;
}
See the working fiddle !
Yes, clearing your floats are important as madhushankarox has pointed out. But you don't always need to use floats, especially not in your case. Plus here's an extra bonus if you ever need to place your form into a liquid layout page. It should proportion itself out equally on most screens that are wide or thin.
CSS
/*the blue rounded box*/
#bluebox {
padding:3% 5%;
margin:0 25%;
background:#d0dcea;
border:solid 1px #b7c2d2;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.fieldset-search {
text-align:center;
}
/*The white search bar*/
.input-search {
padding:5px;
margin:0;
width:50%;
vertical-align: baseline;
border: solid 1px #b7c2d2;
background: #fff;
outline: 0;
}
/*the jQuery Dropdown replacement*/
.list-search {
padding:4px;
margin:0 0 0 -5px;
}
/*the find button*/
.submit-search {
padding:4px 10px;
margin:0 0 0 -5px;
}
HTML
<div id="bluebox">
<div class="fieldset-search">
<input type="text" name="search" class="input-search">
<select name="list" class="list-search"><option></option></select>
<button type="search" class="submit-search">Go</button>
</div>
</div>