CODEWITHSUNDEEP
javascriptjqueryhtml
Saranga
Saranga

Reputation: 520

How to change width of a barcode in html

i need to customize width of an barcode. i have try it using this, i have using jquery-barcode.js plugin.(http://www.jqueryscript.net/other/Simple-jQuery-Based-Barcode-Generator-Barcode.html)

$("#barcodeView").barcode(
"123456789023F", // Value barcode (dependent on the type of barcode)
"code128", // type (string)
{ barWidth: 1, barHeight: 50 }
);

but it was customizing the width and height of single bar. i need to adjust widt and height of a whole barcode. this is my html

<div class="col-xs-12 col-md-6" >
                <div id="barcodeView"></div>
            </div>

Upvotes: 0

Views: 10399

Answers (6)

Juan Redondo
Juan Redondo

Reputation: 173

Here goes my workaround:

barcodediv.barcode(txtBarcode, "code128", { barWidth: 2, barHeight: 70, moduleSize: 5, showHRI: false, addQuietZone: true, marginHRI: 5, bgColor: "#FFFFFF", color: "#000000", fontSize: 10, output: "css", posX: 0, posY: 0 });
barcodediv.css({ transform: 'scale(.75)'});

Upvotes: 0

TheSmile
TheSmile

Reputation: 360

Try this 

<div class="col-xs-12 col-md-6" >
            <div id="barcodeView" style="width:200px;"></div>
        </div>

OR

  <style>
     #barcodeView{
         width:12.5em;

      }

  </style>

Upvotes: 1

Vivek Pradhan
Vivek Pradhan

Reputation: 4847

I was just going through the demo page for the Plugin you are using. The bar code is made of several divs representing individual bars and therefore the whole container i.e the div with id "barcodeTarget" just can't be resized to fit your needs. You can explicitly set it's width but it won't 'resize' the entire barcode like you want.

However the barWidth and barHeight attributes are simply the width and height of all the divs representing the individual bars (in pixels). So you can set those attributes to anything and correspondingly resize the entire barcode. You can obviously limit the width of the container like I mentioned but it wouldn't affect the width of the bars in the bar code. I hope it gets you started in the right direction.

Upvotes: 2

Vilas Kumkar
Vilas Kumkar

Reputation: 1400

If you need to increase the width of whole barcode, you'll need to increase the width of each bar (barWidth in settings).

You can find that customization in settings below:

    var settings = {
      output:renderer,
      bgColor: $("#bgColor").val(),
      color: $("#color").val(),
      barWidth: $("#barWidth").val(),
      barHeight: $("#barHeight").val(),
      moduleSize: $("#moduleSize").val(),
      posX: $("#posX").val(),
      posY: $("#posY").val(),
      addQuietZone: $("#quietZoneSize").val()
    };

Upvotes: -1

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

This would work anyways 

<style>
    #barcodeView{
        width:200px !important;
        }
</style>

Upvotes: 0

Alexis Paques
Alexis Paques

Reputation: 1975

Maybe you just need to specify the width of the object #Barcode, you can add some css :

<style>
#Barconde {
     width:200px;
}
</style>

I think it should work, but I do not know the Barcode API.

Upvotes: 0

Related Questions