Prevent input from leaving the parent container, box-sizing does not work

Question

Prevent input from leaving the parent container, box-sizing does not work

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have a problem with a form, I'm giving input styles all right, but these are out of the form, only fit if I decrease the width or padding, try with the value "border-box", "overflow" : hidden "but I can not prevent them from coming out, attach an image and the code.

HTML code:

:root {
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    font-family: Arial;
    box-sizing: border-box;
}

.formulario {
    background: #fff;
    width: 500px;
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
}

.formulario input {
    display: block;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario textarea{
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    border: 1px solid #226fc1;
    font-family: Arial;
    font-size: 16px;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Formulario-Practica</title>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
    <link rel="stylesheet" href="css/formulario.css">
    </head>
    <body>
    
    <form action="" class="formulario">
        
        <input type="text" id="" placeholder="Nombre">
        <input type="email" placeholder="Correo">
        <textarea name="" id="" placeholder="Mensaje" cols="30" rows="10"></textarea>
        <input type="submit" value="Submit">
        
    </form>
    
    
    </body>
</html>

Image: Incorrect Input

html css contenedores

asked by Jonathan Rivera Diaz 03.04.2017 в 20:58

source

2 answers

2

Actually the inputs are taking the size you indicate them, 100% of the container.

However, your problem is that you are also assigning a 20px padding, which means that you will have an upper, lower padding, and on each of the 20px sides.

Therefore, since you want the input not to leave the container, you will have to use the function calc to subtract 100% of the container from the space occupied by the padding . What would stay like this:

width: calc(100% - 40px);

:root {
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    font-family: Arial;
    box-sizing: border-box;
}

.formulario {
    background: #fff;
    width: 500px;
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
}

.formulario input {
    display: block;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario textarea{
    width: calc(100% - 40px);
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    border: 1px solid #226fc1;
    font-family: Arial;
    font-size: 16px;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Formulario-Practica</title>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
    <link rel="stylesheet" href="css/formulario.css">
    </head>
    <body>
    
    <form action="" class="formulario">
        
        <input type="text" id="" placeholder="Nombre">
        <input type="email" placeholder="Correo">
        <textarea name="" id="" placeholder="Mensaje" cols="30" rows="10"></textarea>
        <input type="submit" value="Submit">
        
    </form>
    
    
    </body>
</html>

answered by 03.04.2017 в 21:10

Dynamic input with the v-model directive in vue.js Error loading Layouts in Android Studio

score 0 · Accepted Answer

You have to put the box-sizing:border-box to the input . By putting it to :root you would really be putting it to the root tag ( html ) and it's a property that is not inherited :

:root {
    margin: 0;
    padding: 0;
    background-color: #f2f2f2;
    font-family: Arial;
    box-sizing: border-box;
}

.formulario {
    background: #fff;
    width: 500px;
    margin: 20px;
    padding: 20px;
    border-radius: 5px;
}

.formulario input {
    display: block;
}

.formulario input[type="text"],
.formulario input[type="email"],
.formulario textarea{
    width: 100%;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 3px;
    border: 1px solid #226fc1;
    font-family: Arial;
    font-size: 16px;
    box-sizing: border-box;
}

<!DOCTYPE html>
<html>
    <head>
        <title>Formulario-Practica</title>
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="keywords" content="">
    <link rel="stylesheet" href="css/formulario.css">
    </head>
    <body>
    
    <form action="" class="formulario">
        
        <input type="text" id="" placeholder="Nombre">
        <input type="email" placeholder="Correo">
        <textarea name="" id="" placeholder="Mensaje" cols="30" rows="10"></textarea>
        <input type="submit" value="Submit">
        
    </form>
    
    
    </body>
</html>