2

Que tal amigos tengo estos codigos de barras, pero necesito que el nombre del producto quede arriba y el precio abajo de manera centrada, he intentado con <br> \n y nada, agradeceria mucho su ayuda.

Este es el codigo:

$(document).on("click",".btn-view-barcode", function(){
    codigo_barra = $(this).val();
    nombre = $(this).closest("tr").find("td:eq(3)").text();
    precio = $(this).closest("tr").find("td:eq(6)").text();
    cantidad = $(this).closest("tr").find("td:eq(9)").text();

    html = "<div class='row'>";
    for (var i = 1; i <= Number(cantidad); i++) {
        html += "<div class='col-xs-6'>";
        html += nombre;
        html += "$. " +precio;
        html += "<svg id='barcode"+i+"'></svg>";
        html += "</div>";
    }
    html += "</div>";
    $("#modal-barcode .modal-body").html(html);
    for (var i = 1; i <= Number(cantidad); i++) {
        JsBarcode("#barcode"+i, codigo_barra, {

          displayValue: true,
          height: 65,
          width: 1.3,
          fontsize: 4,
         // textPosition: "bottom",
         // textAlign: "center",
         // textMargin: 0.5,
          format: "EAN13",
          lineColor: "#000000",
          //marginLeft: 1,
        });
    }

});

Y estos los codigos de barra:

introducir la descripción de la imagen aquí

Estos son los resultados cortesia de @dTobon

introducir la descripción de la imagen aquí

2 respuestas 2

1

Por lo que veo, tienes algunos problemas sobre la generacion del html por lo que te haré algunas observaciones:

cuando escribes html, los atributos se declaran con comilla doble, ej:

<div class="clase-del-div"></div>

Así que estate atento a eso y que tu html no quede malformado

Si te entiendo bien, quieres tratar el nombre y el precio independientemente, y en tu codigo no lo haces, por lo que te propongo generar un contenedor para cada uno con sus respectivos css te dejo mi codigo de prueba para que lo mires y te guies, puesto que es una adaptacion del tuyo, y por lo que no necesitarias la algunos de los elementos del estilo .product{}

<!DOCTYPE  html>
<html>
    <head>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script src="https://cdn.jsdelivr.net/jsbarcode/3.6.0/JsBarcode.all.min.js"></script>
        <style>
            div.product{
                width: 50%; /*este no lo necesitas ya que bootstrap se encarga de esto con la clase col-x*/
                display:inline-block; /*tampoco lo necesitas*/
                text-align:center; /*con este centras el titulo, el precio y el svg*/
            }
            div.div-nombre{
                /*estilos propios del nombre*/
                font-size: 15px;
            }

            div.div-precio{
                /*estilos propios del precio*/
                font-size: 20px;
                font-weight: bold;
            }

        </style>
        <script>
            function btnclick(){
                codigo_barra = "1234";
                nombre = "Ositos de goma";
                precio = "10"
                cantidad = 4;

                let html = '<div class="row">';
                for (var i = 0; i < Number(cantidad); i++) {
                     html += '<div class="col-xs-6 product">';
                     html +=    '<div class="div-nombre">'+nombre+'</div>';
                     html +=    '<div class="div-precio">$'+precio+'</div>';
                     html +=    '<svg id="barcode'+i+'"></svg>';
                     html += '</div>';
                }
                html += "</div>";
                $("#modal-barcode.modal-body").html(html);
                for (var i = 0; i < Number(cantidad); i++) {
                    let svgId = "#barcode"+i;
                    console.log(svgId);
                    JsBarcode(svgId, codigo_barra, {
                        format: "pharmacode",
                        lineColor: "#0aa",
                        width: 4,
                        height: 40,
                        displayValue: false
                    });
                }
            }       
        </script>
    </head>
    <body>
        <div id="modal-barcode" class="modal-body">
        <!-- no tengo modal ni nada por eso supongamos que este es el body del modal-->
        </div>
        <button onclick="btnclick()">Llenar el modal</button>
    </body>
</html>

Espero te sirva y buena suerte.

1
  • Modifique la pregunta con los cambios :)
    – WilsonicX
    el 29 oct. 2018 a las 16:03
0

Luego de esto:

html += nombre;

Agrega una linea así:

html += "<br>";
4
  • Si lo hace pero se salta para la parte de abajo del codigo de barras, y lo que yo necesito es que se quede debajo del nombre del producto no del codigo de barras.
    – WilsonicX
    el 26 oct. 2018 a las 22:38
  • Ponle varios <br> hasta que logres lo que necesitas. el 26 oct. 2018 a las 22:57
  • 1
    no es una buena idea usar un montón de etiquetas br para lograr lo que busca @denifersantiagofernandez eso rompe el como maquetar y da pie a que asi haga en cada caso? para terminar llenando el html de saltos de línea?
    – user75901
    el 27 oct. 2018 a las 2:46
  • Pensé que seria redundante decir que se puede hacer con css. Gracias por la observación. el 27 oct. 2018 a las 3:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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