Center in javascript and leave space between lines

Question

Center in javascript and leave space between lines

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

What friends do I have these barcodes, but I need the name of the product to be above and the price below in a focused way, I tried with <br> \n and nothing, I would really appreciate your help.

This is the code:

$(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,
        });
    }

});

And these bar codes:

These are the results courtesy of @dTobon

javascript jquery

asked by WilsonicX 26.10.2018 в 23:43

source

2 answers

0

After this:

html += nombre;

Add a line like this:

html += "<br>";

answered by 27.10.2018 в 00:34

Help - I can not send object of the view towards the controller arrive null attributes How to remove a value from an html table depending on the selected value with an input check, jquery?

score 1 · Accepted Answer

From what I see, you have some problems about the generation of html so I will make some observations:

When you type html, the attributes are declared with double quotes, ex:

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

So be aware of that and that your html is not malformed

If I understand you, you want to treat the name and price independently, and in your code you do not, so I propose to generate a container for each one with their respective css I leave my test code for you to look at it and you guide yourself, since it is an adaptation of yours, and so you would not need some of the elements of the style .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>

I hope it serves you and good luck.