2

Tengo una página para agregar productos a una factura:

  • Tiene una parte para filtrar por nombre o codigo.
  • Otra parte para ordenamiento por categoría o precio.
  • Por ultimo un edit no editable donde se pone el nombre de producto al hacer clik en una fila, y que, junto a la cantidad introducida en otro edit se procesan al hacer click en agregar. Todo esto dentro de un formulario para dicho fin.

El caso es que no logro ubicar los elementos y quería saber una técnica correcta para hacerlo.

<form>
<p>FILTRO</p>
  <script src="includes/js/busqProducto.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <div class="form-group">
    <label class="col-sm-1 control-label">COD</label>
    <div class="col-sm-2">
      <input type="text" class="form-control" id="cod" placeholder="Codigo Articulo"/>
    </div>



    <label class="col-sm-1 control-label">NOMBRE</label>
    <div class="col-sm-7">
      <input type="text" class="form-control" id="nombre" placeholder="Nombre Articulo"/>
   
  </div>
 


<p>ORDENAMIENTO</p>
<div class="col-sm-4" style="margin: 20px 0 0 10px;">
    
    
      <input type="checkbox" id="marca"/>
      <label>NOMBRE</label>
      <select id="mySelect" data-show-icon="true">
       <option>  ASC</option>
       <option>  DESC</option>
</select>

    
      <input type="checkbox"id="categoria"/>
      <label>PRECIO</label>
      <select id="mySelect" data-show-icon="true">
       <option>  ASC</option>
       <option>  DESC</option>
</select>
   
  </div>


</form>
<form style="position:relative;width: 100%;">
    <div class="col-sm-8"  >
      <input type="text" disabled="true" class="form-control" id="nombreselec" placeholder="Nombre Articulo"/>
  </div> 

    <div class="col-sm-2">
      <input type="text" class="form-control" id="CANTIDAD" placeholder="CANT"/>

  </div>
   <div class="col-sm-2">
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-shopping-cart"></span>Agregar
  </button>
</div>
 <div class="col-sm-2">
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-ok"></span>Terminado
  </button>
</div>
</form>
<table id="resultado">
<thead>
<tr> <th>COD.:</th> <th>DESCRIPCION</th> <th>MARCA</th>
            <th>CATEGORIA</th> <th>P/U</th><th>+</th>
            </tr></thead>
            <tbody>
            
            </tbody>
</table>

Aqui una imagen actual: introducir la descripción de la imagen aquí

Mi idea es alinear el nombre y la cantidad a los dos botones. Espero su ayuda

2
  • Hola, te recomiendo echar un vistazo al grid system de Bootstrap. Si estás trabajando con tablas y formularios, Bootstrap tiene clases ya definidas para estos elementos con los que podrías trabajar: Formularios - Tablas .
    – Ferni
    Commented el 11 jul. 2018 a las 8:30
  • Gracias,le hechare un vistazo
    – Caruso
    Commented el 11 jul. 2018 a las 8:38

2 respuestas 2

3

En esta parte tienes mal el grid, en total la suma de sus columnas tiene que dar 12 y aqui tienes 14 "8+2+2+2=14"

<form style="position:relative;width: 100%;">
    <div class="col-sm-8"  >
      <input type="text" disabled="true" class="form-control" id="nombreselec" placeholder="Nombre Articulo"/>
  </div> 

    <div class="col-sm-2">
      <input type="text" class="form-control" id="CANTIDAD" placeholder="CANT"/>

  </div>
   <div class="col-sm-2">
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-shopping-cart"></span>Agregar
  </button>
</div>
 <div class="col-sm-2">
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-ok"></span>Terminado
  </button>
</div>
</form>

La forma correcta seria disminuyendo el valor a una columna en su clase asi (6+2+2+2=12):

<form style="position:relative;width: 100%;">
    <div class="col-sm-6"  >
      <input type="text" disabled="true" class="form-control" id="nombreselec" placeholder="Nombre Articulo"/>
  </div> 

    <div class="col-sm-2">
      <input type="text" class="form-control" id="CANTIDAD" placeholder="CANT"/>

  </div>
   <div class="col-sm-2">
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-shopping-cart"></span>Agregar
  </button>
</div>
 <div class="col-sm-2">
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-ok"></span>Terminado
  </button>
</div>
</form>
1
  • Muchas gracias..la verdad no sabia que la suma tenia que dar 12.
    – Caruso
    Commented el 11 jul. 2018 a las 8:38
0

Además de que la suma de las columnas deben dar 12 tienes que crear div de clases row-fluid, al igual que las tablas tienen filas y columnas nuestra página también las tiene, en el caso de las columnas como anteriormente se indicó es igual a 12 por fila, la clase que se asigna es col-md-x donde el valor de en medio o para este ejemplo "me" corresponde a medium, osea será una columna de tamaño mediano que ocupe x columnas, el tamaño si no estoy equivocado se usa para adaptar el contenido a los diferentes dispositivos, bootstrap también tiene clases responsives que están creadas para eso, el contenido se ajusta al tamaño del navegador/pantalla, te recomiendo ir a la página de bootstrap y buscar el contenido correspondiente , allí podrás ver ejemplos didácticos que te ayudarán mucho

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.