0

Qué tal amigos, estoy haciendo unos formularios, pero tengo el problema de que por alguna razón los elementos dentro de mi formulario no están "dentro" al menos en la vista no parecen estarlo , en mi código lo están pero no sé porque no se ajusta el background del form, algo curioso es que al reducir el tamaño de la pantalla todo se ajusta perfecto, cosa muy distinta a lo que pasa en pantalla completa.

introducir la descripción de la imagen aquí

<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>

Aquí dejo mi codigo por si alguien nota algo que yo me esté pasando por alto. Gracias a todos.

3
  • El código que anexas empieza desde Tipo de aviso por lo que no se puede visualizar lo que ocasiona el comportamiento de la pagina. Commented el 15 oct. 2018 a las 20:04
  • si, lo que me llama la atención es que tengo otros formularios muy similares, donde todo lo que va dentro del form tiene el fondo blanco, no estoy usando jquery ni nada similar pero me imagino que ha de haber algo mal en mi html para que no entré en form Commented el 15 oct. 2018 a las 20:08
  • sube completo tu HTML, parece que este fragmento de código no tiene anomalías. Commented el 16 oct. 2018 a las 16:15

2 respuestas 2

1

pudes agregar un height: auto; o height:100%; para asegurar que abarque todo el contenido

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>

1
  • no me ha servido mucho , oye dentro de mi html encontraste alguna anomalía ? Commented el 15 oct. 2018 a las 22:57
0

Finalmente resolví esto agregando todo lo que estaba en mi form dentro de un **class = "row"

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

</form>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.