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/
I am able to submit my the contact form in the footer on desktop version but not on mobile. "Send message" button below the contact form is not clickable on mobile. My website link: https://expatguideturkey.com/ Below is my code for this form. Please advise.
<div className="row">
<div className="col-md-4"
data-sal="slide-up"
data-sal-delay="300"
data-sal-duration="60s"
data-sal-easing="ease">
<h3>PROFESSIONAL ASSISTANCE</h3>
<p className="expat-contact">Some Paragraph... </p>
</div>
<div className="col-md-1"><br/></div>
<div className="col-md-7"
data-sal="slide-up"
data-sal-delay="400"
data-sal-duration="60s"
data-sal-easing="ease">
<h3>GET IN TOUCH</h3>
<form
name="contact"
method="POST"
action="https://getform.io/f/192e20fe"
>
<div className="half left cf">
<input type="hidden" name="form-name" value="contact" />
<input type="text" name="name" id="input-name" className="form-control" placeholder="Your Name" required />
<input type="email" name="email" id="input-email" className="form-control" placeholder="Email address" title="Email (format: your#example.com)" required />
<div className="invalid-feedback">
Please enter a valid email address.
</div>
<div style={{ paddingTop: '5px'}}>
<select name="service" id="service" className="form-control" v-model="service" style={{ color:'crimson' }}>
<option>General Enquiry</option>
<option>Citizenship Application</option>
<option>Residence Permit Application</option>
<option>Work Permit Application</option>
<option>Company Establishment</option>
<option>Virtual and Ready Office</option>
<option>Umbrella Services</option>
</select>
</div>
<IntlTelInput fieldId="phonenum" fieldName="phonenum" containerClassName="intl-tel-input" inputClassName="form-control" defaultCountry="tr"/>
</div>
<div className="half right cf">
<textarea name="message" id="input-message" rows="4" className="form-control" placeholder="Message"></textarea>
</div>
<input type='submit' id="input-submit" className="btn btn-primary btn-lg btn-block" value="Send Message"/>
</form>
</div>
</div>
Below is the Gatsby plugin that I am using for animation:
`gatsby-plugin-scroll-reveal`,
{
resolve: `gatsby-plugin-scroll-reveal`,
options: {
threshold: 1, // Percentage of an element's area that needs to be visible to launch animation
once: true, // Defines if animation needs to be launched once
disable: false, // Flag for disabling animations
// Advanced Options
selector: '[data-sal]', // Selector of the elements to be animated
animateClassName: 'sal-animate', // Class name which triggers animation
disabledClassName: 'sal-disabled', // Class name which defines the disabled state
rootMargin: '0% 50%', // Corresponds to root's bounding box margin
enterEventName: 'sal:in', // Enter event name
exitEventName: 'sal:out' // Exit event name
}
},
Below is the css of the above form:
form {
max-width: 600px;
text-align: center;
margin: 10px auto;
max-height: 150PX;
margin-left: 0px;
padding-bottom: 10px;
}
form input, form textarea {
border: 0;
outline: 0;
padding: 0.7em;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
display: block;
width: 100%;
margin-top: 0.5em;
font-family: 'Merriweather', sans-serif;
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
resize: none;
}
form input:focus, form textarea:focus {
-moz-box-shadow: 0 0px 2px #e74c3c !important;
-webkit-box-shadow: 0 0px 2px #e74c3c !important;
box-shadow: 0 0px 2px #e74c3c !important;
}
.form-control input:focus{
background-color: rgb(255, 218, 232);
}
form #input-submit {
font-family: 'Raleway', sans-serif;
font-weight: 500;
color: white;
background: rgba(221, 59, 59, 0.863);
cursor: pointer;
width: 295px;
height: 50px;
}
form #input-submit:hover {
font-family: 'Raleway', sans-serif;
-moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
-webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
box-shadow: 0 0px 2px #d22e !important;
background: #d22e;
font-weight: 600;
}
input[type="tel"] {
border: 1px solid #ddd;
padding: 4px 8px;
}
form #input-message{
height: 145px;
}
form textarea {
height: 115px;
width: 370px;
}
Two div.col-md-4 elements are overlapping the "Send Message" button.
A quick fix would be to add the pointer-events: none CSS property to the elements, this allows you to click through the element. Since that seems like kind of a hacky solution to me, and not your intended behaviour, I'd suggest fixing the layout and hiding the elements in the mobile view. This is up to you to decide as I have no idea what your intention is.
EDIT: I looked into your layout, and it seems like you're misusing the column layout a little bit. I wouldn't suggest putting line breaks in empty columns.
Anyways, the solution is to remove the max-height property from your form in the CSS. The max-height pushes the textarea and message button outside of the form and allows the column to overlap them.
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!
we are developing hybrid mobile application using dojo 1.10.3 .
all devices text field is coming UI is good except iPhone environment text field inside top portion unwanted property(black color border and shadow) coming that is not looking good.
In that input field we are not able to find it what is that exactly property
we are taking some input fields and adding css properties like below
.textbox{
margin: 0px auto 0px auto;
font-size: 12px;
font-weight: bold;
text-indent: 10px;
color: rgba(23, 82, 117, 1.0);
display: block;
width: 85%;
height: 34px;
border: 1px solid rgba(204, 204, 204, 1.0);
border-radius: 0px;
background-color: white !important;
outline: none !important;
-webkit-box-shadow: inset 0px 0px 0px 0px transparent;
-moz-box-shadow: inset 0px 0px 0px 0px transparent;
box-shadow: inset 0px 0px 0px 0px transparent;
}
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
and textfeild default css code in iphone.css like below
.mblTextBox {
height: 22px;
border-width: 1px;
border-style: inset;
font-family: Helvetica;
font-size: 13px;
border-color: #9cacc0;
border-radius: 5px;
}
i am attaching screen shots Please find my problem easily understand
we want like this
enter image description here
actual problem below like this
enter image description here
Try adding: -webkit-appearance: none; to all input elements in CSS.
The input below should appear the same on all browsers (including mobile Safari)
input[type=text] {
-webkit-appearance: none;
border: 1px solid black;
border-radius: 0px;
outline: none;
width: 200px;
margin: 0px;
padding: 4px;
}
<input type="text" />
Edit:
It seems that you're problem could also be solved via this way: https://davidwalsh.name/input-shadows-ipad
Edit 2:
I've tried the example below multiple times and it should definitely work. If not, you're using some CSS rules that might override one (or more) of the rules from the example.
Result on iPhone Simulator:
ul.examples {
list-style: none;
padding: 0px;
font-family: Arial;
}
.textbox {
margin: 5px 0px 10px 0px;
display: block;
width: 100%;
border: 1px solid rgba(204, 204, 204, 1.0);
border-radius: 0px;
outline: none !important;
}
.example:last-child .textbox {
-webkit-appearance: none;
color: red;
}
<ul class="examples">
<li class="example">Your example:
<br/>
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
</li>
<li class="example">My example:
<br/>
<input data-dojo-type="dojox.mobile.TextBox" class="textbox">
</li>
</ul>