Problems with Forms of Bootstrap

Navigation
0

How about friends, I'm doing some forms, but I have the problem that for some reason the elements inside my form are not "inside" at least in the view they do not seem to be, in my code they are but I do not know why the background of the form is not adjusted, something curious is that by reducing the size of the screen everything fits perfectly, something very different from what happens in full screen. 

<form id="saticF5" class="" style="padding:2%;" method="post">
  <div class="col-xs-12 top4">
    <div class="">
      <label>1) Tipo de aviso </label><br />
      <input type="radio" name="tipo_anex5" value="0" required> Ordinario
      <input type="radio" name="tipo_anex5" value="1" required> Complemento
    </div>
  </div>

  <div class="col-xs-12">
    <h4 class="top2"><b>Datos del patrón</b></h4>
  </div>

  <div class="col-xs-12">

    <label class="top2">2)  Nombre,denomicacion o razon social del patro o sujeto obligatorio </label><br />
    <input class="form-control " required type="text" name="nombrePatron5" width="230" value="" />
    <br />

    <label class="top2">3)  Número de registro de obra </label><br />
    <input class="form-control " maxlength="14" required type="text" name="numobra5" width="230" value="" />
  </div>

  <div class="col-xs-12">
    <h4 class="top2"><b>Datos de los trabajadores</b></h4>
    <span class="help-block text-justify">
                                        Relación de trabajadores correspondientes al bimestre
                                    </span>
  </div>


  <div class="col-md-6">

    <label>4) Número</label><br />
    <input type="text" class="form-control" name="num5" value="" />
  </div>
  <div class="col-md-6">
    <label>5) Del año</label>
    <input type="number" class="form-control" name="anio5" value="" />
  </div>

  <div class="col-xs-12 top4">
    <br />
    <table class="table table-bordered top4">
      <thead>
        <tr>
          <th>
            Nombre del trabajador ( 6 )
          </th>
          <th>
            NSS ( 7 )
          </th>
          <th>
            Categoría ( 8 )
          </th>

          <th>
            Subcategoría ( 9 )
          </th>
          <th>
            Días trabajados primer mes (10 )
          </th>
          <th>
            Días trabajados segundo mes (11 )
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" required name="nombret1" value="" /></td>
          <td><input type="text" required name="nss1" value="" /></td>
          <td><input type="text" required name="cat1" value="" /></td>
          <td><input type="text" required name="subcat1" value="" /></td>
          <td><input type="text" required name="diasPrimt1" value="" /></td>
          <td><input type="text" required name="diasSeg1" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret2" value="" /></td>
          <td><input type="text" name="nss2" value="" /></td>
          <td><input type="text" name="cat2" value="" /></td>
          <td><input type="text" name="subcat2" value="" /></td>
          <td><input type="text" name="diasPrimt2" value="" /></td>
          <td><input type="text" name="diasSeg2" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret3" value="" /></td>
          <td><input type="text" name="nss3" value="" /></td>
          <td><input type="text" name="cat3" value="" /></td>
          <td><input type="text" name="subcat3" value="" /></td>
          <td><input type="text" name="diasPrimt3" value="" /></td>
          <td><input type="text" name="diasSeg3" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret4" value="" /></td>
          <td><input type="text" name="nss4" value="" /></td>
          <td><input type="text" name="cat4" value="" /></td>
          <td><input type="text" name="subcat4" value="" /></td>
          <td><input type="text" name="diasPrimt4" value="" /></td>
          <td><input type="text" name="diasSeg4" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret5" value="" /></td>
          <td><input type="text" name="nss5" value="" /></td>
          <td><input type="text" name="cat5" value="" /></td>
          <td><input type="text" name="subcat5" value="" /></td>
          <td><input type="text" name="diasPrimt5" value="" /></td>
          <td><input type="text" name="diasSeg5" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret6" value="" /></td>
          <td><input type="text" name="nss6" value="" /></td>
          <td><input type="text" name="cat6" value="" /></td>
          <td><input type="text" name="subcat6" value="" /></td>
          <td><input type="text" name="diasPrimt6" value="" /></td>
          <td><input type="text" name="diasSeg6" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret7" value="" /></td>
          <td><input type="text" name="nss7" value="" /></td>
          <td><input type="text" name="cat7" value="" /></td>
          <td><input type="text" name="subcat7" value="" /></td>
          <td><input type="text" name="diasPrimt7" value="" /></td>
          <td><input type="text" name="diasSeg7" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret8" value="" /></td>
          <td><input type="text" name="nss8" value="" /></td>
          <td><input type="text" name="cat8" value="" /></td>
          <td><input type="text" name="subcat8" value="" /></td>
          <td><input type="text" name="diasPrimt8" value="" /></td>
          <td><input type="text" name="diasSeg8" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret9" value="" /></td>
          <td><input type="text" name="nss9" value="" /></td>
          <td><input type="text" name="cat9" value="" /></td>
          <td><input type="text" name="subcat9" value="" /></td>
          <td><input type="text" name="diasPrimt9" value="" /></td>
          <td><input type="text" name="diasSeg9" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret10" value="" /></td>
          <td><input type="text" name="nss10" value="" /></td>
          <td><input type="text" name="cat10" value="" /></td>
          <td><input type="text" name="subcat10" value="" /></td>
          <td><input type="text" name="diasPrimt10" value="" /></td>
          <td><input type="text" name="diasSeg10" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret11" value="" /></td>
          <td><input type="text" name="nss11" value="" /></td>
          <td><input type="text" name="cat11" value="" /></td>
          <td><input type="text" name="subcat11" value="" /></td>
          <td><input type="text" name="diasPrimt11" value="" /></td>
          <td><input type="text" name="diasSeg11" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret12" value="" /></td>
          <td><input type="text" name="nss12" value="" /></td>
          <td><input type="text" name="cat12" value="" /></td>
          <td><input type="text" name="subcat12" value="" /></td>
          <td><input type="text" name="diasPrimt12" value="" /></td>
          <td><input type="text" name="diasSeg12" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret13" value="" /></td>
          <td><input type="text" name="nss13" value="" /></td>
          <td><input type="text" name="cat13" value="" /></td>
          <td><input type="text" name="subcat13" value="" /></td>
          <td><input type="text" name="diasPrimt13" value="" /></td>
          <td><input type="text" name="diasSeg13" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret14" value="" /></td>
          <td><input type="text" name="nss14" value="" /></td>
          <td><input type="text" name="cat14" value="" /></td>
          <td><input type="text" name="subcat14" value="" /></td>
          <td><input type="text" name="diasPrimt14" value="" /></td>
          <td><input type="text" name="diasSeg14" value="" /></td>
        </tr>
      </tbody>
    </table>
  </div>

  <input type="button" class=" pull-right" onclick="saticF5()" value="Generar Anexo" />
</form>

Here I leave my code in case someone notices something that I am overlooking. Thanks to everyone.

    
asked by E.Rawrdríguez.Ophanim 15.10.2018 в 21:53
source

2 answers

0

I finally resolved this by adding everything that was in my form into a ** class="row" 

<form action="/" method="post">
  <div class="row">
    <div class="col-xs-12">
      valores aquí ...
    </div>
  </div>

</form>
    
answered by 16.10.2018 / 23:46
source
1

You can add a height: auto; or height:100%; to ensure it covers all the content 

body{

background: -moz-linear-gradient(top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
}
<form id="saticF5" class="" style="padding:2%; height:auto; background:white;" method="post">
  <div class="col-xs-12 top4">
    <div class="">
      <label>1) Tipo de aviso </label><br />
      <input type="radio" name="tipo_anex5" value="0" required> Ordinario
      <input type="radio" name="tipo_anex5" value="1" required> Complemento
    </div>
  </div>

  <div class="col-xs-12">
    <h4 class="top2"><b>Datos del patrón</b></h4>
  </div>

  <div class="col-xs-12">

    <label class="top2">2)  Nombre,denomicacion o razon social del patro o sujeto obligatorio </label><br />
    <input class="form-control " required type="text" name="nombrePatron5" width="230" value="" />
    <br />

    <label class="top2">3)  Número de registro de obra </label><br />
    <input class="form-control " maxlength="14" required type="text" name="numobra5" width="230" value="" />
  </div>

  <div class="col-xs-12">
    <h4 class="top2"><b>Datos de los trabajadores</b></h4>
    <span class="help-block text-justify">
                                        Relación de trabajadores correspondientes al bimestre
                                    </span>
  </div>


  <div class="col-md-6">

    <label>4) Número</label><br />
    <input type="text" class="form-control" name="num5" value="" />
  </div>
  <div class="col-md-6">
    <label>5) Del año</label>
    <input type="number" class="form-control" name="anio5" value="" />
  </div>

  <div class="col-xs-12 top4">
    <br />
    <table class="table table-bordered top4">
      <thead>
        <tr>
          <th>
            Nombre del trabajador ( 6 )
          </th>
          <th>
            NSS ( 7 )
          </th>
          <th>
            Categoría ( 8 )
          </th>

          <th>
            Subcategoría ( 9 )
          </th>
          <th>
            Días trabajados primer mes (10 )
          </th>
          <th>
            Días trabajados segundo mes (11 )
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" required name="nombret1" value="" /></td>
          <td><input type="text" required name="nss1" value="" /></td>
          <td><input type="text" required name="cat1" value="" /></td>
          <td><input type="text" required name="subcat1" value="" /></td>
          <td><input type="text" required name="diasPrimt1" value="" /></td>
          <td><input type="text" required name="diasSeg1" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret2" value="" /></td>
          <td><input type="text" name="nss2" value="" /></td>
          <td><input type="text" name="cat2" value="" /></td>
          <td><input type="text" name="subcat2" value="" /></td>
          <td><input type="text" name="diasPrimt2" value="" /></td>
          <td><input type="text" name="diasSeg2" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret3" value="" /></td>
          <td><input type="text" name="nss3" value="" /></td>
          <td><input type="text" name="cat3" value="" /></td>
          <td><input type="text" name="subcat3" value="" /></td>
          <td><input type="text" name="diasPrimt3" value="" /></td>
          <td><input type="text" name="diasSeg3" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret4" value="" /></td>
          <td><input type="text" name="nss4" value="" /></td>
          <td><input type="text" name="cat4" value="" /></td>
          <td><input type="text" name="subcat4" value="" /></td>
          <td><input type="text" name="diasPrimt4" value="" /></td>
          <td><input type="text" name="diasSeg4" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret5" value="" /></td>
          <td><input type="text" name="nss5" value="" /></td>
          <td><input type="text" name="cat5" value="" /></td>
          <td><input type="text" name="subcat5" value="" /></td>
          <td><input type="text" name="diasPrimt5" value="" /></td>
          <td><input type="text" name="diasSeg5" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret6" value="" /></td>
          <td><input type="text" name="nss6" value="" /></td>
          <td><input type="text" name="cat6" value="" /></td>
          <td><input type="text" name="subcat6" value="" /></td>
          <td><input type="text" name="diasPrimt6" value="" /></td>
          <td><input type="text" name="diasSeg6" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret7" value="" /></td>
          <td><input type="text" name="nss7" value="" /></td>
          <td><input type="text" name="cat7" value="" /></td>
          <td><input type="text" name="subcat7" value="" /></td>
          <td><input type="text" name="diasPrimt7" value="" /></td>
          <td><input type="text" name="diasSeg7" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret8" value="" /></td>
          <td><input type="text" name="nss8" value="" /></td>
          <td><input type="text" name="cat8" value="" /></td>
          <td><input type="text" name="subcat8" value="" /></td>
          <td><input type="text" name="diasPrimt8" value="" /></td>
          <td><input type="text" name="diasSeg8" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret9" value="" /></td>
          <td><input type="text" name="nss9" value="" /></td>
          <td><input type="text" name="cat9" value="" /></td>
          <td><input type="text" name="subcat9" value="" /></td>
          <td><input type="text" name="diasPrimt9" value="" /></td>
          <td><input type="text" name="diasSeg9" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret10" value="" /></td>
          <td><input type="text" name="nss10" value="" /></td>
          <td><input type="text" name="cat10" value="" /></td>
          <td><input type="text" name="subcat10" value="" /></td>
          <td><input type="text" name="diasPrimt10" value="" /></td>
          <td><input type="text" name="diasSeg10" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret11" value="" /></td>
          <td><input type="text" name="nss11" value="" /></td>
          <td><input type="text" name="cat11" value="" /></td>
          <td><input type="text" name="subcat11" value="" /></td>
          <td><input type="text" name="diasPrimt11" value="" /></td>
          <td><input type="text" name="diasSeg11" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret12" value="" /></td>
          <td><input type="text" name="nss12" value="" /></td>
          <td><input type="text" name="cat12" value="" /></td>
          <td><input type="text" name="subcat12" value="" /></td>
          <td><input type="text" name="diasPrimt12" value="" /></td>
          <td><input type="text" name="diasSeg12" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret13" value="" /></td>
          <td><input type="text" name="nss13" value="" /></td>
          <td><input type="text" name="cat13" value="" /></td>
          <td><input type="text" name="subcat13" value="" /></td>
          <td><input type="text" name="diasPrimt13" value="" /></td>
          <td><input type="text" name="diasSeg13" value="" /></td>
        </tr>
        <tr>
          <td><input type="text" name="nombret14" value="" /></td>
          <td><input type="text" name="nss14" value="" /></td>
          <td><input type="text" name="cat14" value="" /></td>
          <td><input type="text" name="subcat14" value="" /></td>
          <td><input type="text" name="diasPrimt14" value="" /></td>
          <td><input type="text" name="diasSeg14" value="" /></td>
        </tr>
      </tbody>
    </table>
  </div>

  <input type="button" class=" pull-right" onclick="saticF5()" value="Generar Anexo" />
</form>
    
answered by 15.10.2018 в 22:51
Problem to update record with php and mysql combobox? Mongoose query with conditional