CODEWITHSUNDEEP
htmlcss
Kakar
Kakar

Reputation: 5609

Input type to have width of 100% and be inside parent div

I have a form with input for an email and password and some other buttons.

html:

<div  id="login-form">
<form>
    <input type="email" placeholder="Email" id="email" name="email_phone">
    <br>
    <input type="password" placeholder="Password" id="password" name="password">
    <br>
    <button id="login-submit">Submit</button>
    <br>
    <button id="login-forgot">Forgot Password</button>
</form>
<br>
<br>
<center>
    <p>Don't have an account?</p>
</center>
<button id="create-new-account">Create Account Now</button>
</div>

I need the input and buttons to be 100% width of the parent. And have a padding of 10px.

#login-form input[type=email], #login-form input[type=password] {
    width: 100%;
    font-size: 14pt;
    border: none;
    outline: none;
    padding: 10px;
}

#login-form button {
    width: 100%;
    border: none;
    color: white;
    font-size: 14pt;
    padding: 10px;
    margin-top: 10px;
    border-radius: 4px;
    cursor: pointer;
}

Then the problem starts with the input width. All the buttons are inside the parent element, but the input box cross the parent div. Like this:

enter image description here

demo at Codepen.

How do I keep the input box inside the parent div and have a width of 100% and still have padding?

Upvotes: 3

Views: 8767

Answers (4)

Abaas Skills
Abaas Skills

Reputation: 91

Add this code inside your style file

*,
 ::before {
    box-sizing: border-box;
}

Upvotes: 0

Max Kroshka
Max Kroshka

Reputation: 487

The problem is with the input paddings. To fix it add box-sizing property to your input fields:

box-sizing: border-box;

I just tested it in your codepen, seems like the result you want.

Upvotes: 15

Jagdish Barot
Jagdish Barot

Reputation: 201

give div width 100% and then change input field width

Upvotes: 1

Sub 6 Resources
Sub 6 Resources

Reputation: 1752

It's because of the padding in the input elements. It is set to ten, causing it to have to expand past the edge of the parent element. Possible solutions include just removing the padding or decreasing the width so it fits nicely inside.

Upvotes: 0

Related Questions