lower containers do not fit the upper container

Navigation
2

help please, the problem is that the fieldset labels are mismatched from their container on the right side of the sheet, when viewed on small devices: 

*{box-sizing: border-box;}
#controlesFactura{
    margin-bottom: 7px;
}
.btn{
    border: 2px solid black;
    background-color:  #4CAF50;
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
}
.enviar{
    border-color: #4CAF50;
    color: white;
}
.enviar:hover {
  background-color: #339933;
  color: white;
}
#tablaFactura{
    border: 5px solid black;
}
/*ESTILOS FACTURA*/
#clienteDatos input[type=text]{
    width: 100%;
    /*border:none;*/
}
#tblFactura{
  border:#339933;
}
/*CENTRANDO LA FACTURA*/
#facturaContenedor{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
}
/*FACTURA GENERAL*/
#facturaCabecera, #facturaCliente, #facturaItems{
    width: 100%;
}

/*TAMAÑOS DE CELDAS TABLA ITEMS*/
.faCodP{
    width: 30px;
}
.faDesP{
    width: 200px;
}
.faCanP{
    width: 40px;
}
.faPreP{
    width: 50px;
}
.faSub{
    width: 70px;
}
.faIva{
    width: 40px;
}
.faTot{
    width: 80px;
}
#facturaItems input[type=text]{
    width: 100%;
}
<!DOCTYPE html>
<html>
    <head>
        <title>Factura</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--HOJAS DE ESTILO-->
        <link rel="stylesheet" type="text/css" href="../css/estilosFactura.css">
        <link rel="stylesheet" type="text/css" href="../css/estilosGenerales.css">
    </head>
    <body>
        <div class="contenedores">
            <fieldset id="facturaCabecera">
                <legend>Datos Factura</legend>
                <table>
                    <tbody>
                        <tr>
                            <td>001</td>
                            <td>001</td>
                            <td>00000</td>
                            <td>claveacces111111111111111111111</td>
                            <td>fecha11111111111111</td>
                            <td style="width: 5%;"></td>
                        </tr>
                    </tbody>
                </table>
             </fieldset>
            <fieldset id="facturaCliente">
                <legend>Datos Cliente</legend>
                <table>
                    <tbody>
                        <tr>
                            <td><select><option>Consumidor Final</option></select></td>
                            <td><input type="text"></td>
                            <td><input type="button" value="Buscar"></td>
                            <td><a>Nuevo Cliente</a></td>
                            <td style="width:5%;"></td>
                        </tr>
                     </tbody>
                </table>
                <div id="clienteDatos">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                    <input type="text">
                </div>
             </fieldset>
            <fieldset id="facturaItems">
                <legend>Items</legend>
                <div id="facturaContenedor">
                    <table id="tblFactura">
                        <thead class="tablaCabecera">
                            <tr>
                                <th>Cod</th>
                                <th>Descripcion</th>
                                <th>Cant</th>
                                <th>P.Unit</th>
                                <th>Subtotal</th>
                                <th>Iva</th>
                                <th>P.Total</th>
                                <th>Eliminar</th>
                            </tr>
                        </thead>
                        <tbody class="tablaCuerpo">
                            <tr>
                                <td class="faCodP"><input type="text"></td>
                                <td class="faDesP"><input type="text"></td>
                                <td class="faCanP"><input type="text"></td>
                                <td class="faPreP"><input type="text"></td>
                                <td class="faSub"><input type="text"></td>
                                <td class="faIva"><input type="text"></td>
                                <td class="faTot"><input type="text"></td>
                                <td class="faEli"><input type="button" value="Eliminar"></td>
                            </tr>
                            <tr>
                                <td class="faCodP"><input type="text"></td>
                                <td class="faDesP"><input type="text"></td>
                                <td class="faCanP"><input type="text"></td>
                                <td class="faPreP"><input type="text"></td>
                                <td class="faSub"><input type="text"></td>
                                <td class="faIva"><input type="text"></td>
                                <td class="faTot"><input type="text"></td>
                                <td class="faEli"><input type="button" value="Eliminar"></td>
                            </tr>
                            <tr>
                                <td class="faCodP"><input type="text"></td>
                                <td class="faDesP"><input type="text"></td>
                                <td class="faCanP"><input type="text"></td>
                                <td class="faPreP"><input type="text"></td>
                                <td class="faSub"><input type="text"></td>
                                <td class="faIva"><input type="text"></td>
                                <td class="faTot"><input type="text"></td>
                                <td class="faEli"><input type="button" value="Eliminar"></td>
                            </tr>
                            <tr>
                                <td class="faCodP"><input type="text"></td>
                                <td class="faDesP"><input type="text"></td>
                                <td class="faCanP"><input type="text"></td>
                                <td class="faPreP"><input type="text"></td>
                                <td class="faSub"><input type="text"></td>
                                <td class="faIva"><input type="text"></td>
                                <td class="faTot"><input type="text"></td>
                                <td class="faEli"><input type="button" value="Eliminar"></td>
                            </tr>
                            <tr>
                                <td class="faCodP"><input type="text"></td>
                                <td class="faDesP"><input type="text"></td>
                                <td class="faCanP"><input type="text"></td>
                                <td class="faPreP"><input type="text"></td>
                                <td class="faSub"><input type="text"></td>
                                <td class="faIva"><input type="text"></td>
                                <td class="faTot"><input type="text"></td>
                                <td class="faEli"><input type="button" value="Eliminar"></td>
                            </tr>
                            <tr>
                                <td class="faCodP"><input type="text"></td>
                                <td class="faDesP"><input type="text"></td>
                                <td class="faCanP"><input type="text"></td>
                                <td class="faPreP"><input type="text"></td>
                                <td class="faSub"><input type="text"></td>
                                <td class="faIva"><input type="text"></td>
                                <td class="faTot"><input type="text"></td>
                                <td class="faEli"><input type="button" value="Eliminar"></td>
                            </tr>
                            <tr>
                                <td class="faCodP"><input type="text"></td>
                                <td class="faDesP"><input type="text"></td>
                                <td class="faCanP"><input type="text"></td>
                                <td class="faPreP"><input type="text"></td>
                                <td class="faSub"><input type="text"></td>
                                <td class="faIva"><input type="text"></td>
                                <td class="faTot"><input type="text"></td>
                                <td class="faEli"><input type="button" value="Eliminar"></td>
                            </tr>
                            <tr>
                                <td class="faCodP"><input type="text"></td>
                                <td class="faDesP"><input type="text"></td>
                                <td class="faCanP"><input type="text"></td>
                                <td class="faPreP"><input type="text"></td>
                                <td class="faSub"><input type="text"></td>
                                <td class="faIva"><input type="text"></td>
                                <td class="faTot"><input type="text"></td>
                                <td class="faEli"><input type="button" value="Eliminar"></td>
                            </tr>


                        </tbody>
                        <tfoot class="tablaPie">
                            <tr>
                                <td>subotoal</td>
                                <td>0.00</td>
                            </tr>
                            <tr>
                                <td>Grava 0</td>
                                <td>0.00</td>
                            </tr>
                            <tr>
                                <td>Grava Iva</td>
                                <td>0.00</td>
                            </tr>
                            <tr>
                                <td>Iva</td>
                                <td>0.00</td>
                            </tr>
                            <tr>
                                <td>Total</td>
                                <td>0.00</td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </fieldset>
        </div>
     </body>
</html>
    
asked by Felix 05.07.2018 в 00:15
source

1 answer

1

The reason is that the tables have a width greater than 420 pixels and that causes them to leave the parent container, with the second fieldset being the only one that really fulfills what was expected. That is, the red line where you indicate where the fieldset should go should go with the end of the second fieldset (which is the only one that fits well at 420px).

In particular, it seems that the problem occurs because the titles of the tables and the contents of the cells push the size of the table beyond what is allowed. A possible solution for this is to tell the browser to break the words that are too large within the tables. Something you could do add this to your CSS: 

table tr td, table tr th {
  word-break: break-word;
}

Then the tables (and the fieldset) will already adjust well to the width, although the long words will break in several rows:

Another option would be to reduce the text size for smaller screens using media queries. Something like this: 

@media (max-width: 420px) {
  table tr td, table tr th {
    font-size: 0.65em;
  }
}

that would look like this:

Although you might encounter the same problem (because the cells will actually readjust automatically in size and the problem could happen again.

Another option would be to combine the two things: 

@media (max-width: 420px) {
  table tr td, table tr th {
    font-size: 0.65em;
    word-break: break-word;
  }
}

But again, some control is left to the browser, which can result in unexpected visualizations (although they will always be limited to 420px wide).

    
answered by 05.07.2018 / 17:18
source
Make a lock of a cron problems with tryCatch