i need to customize width of an barcode. i have try it using this, i have using jquery-barcode.js plugin.(.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>

i need to customize width of an barcode. i have try it using this, i have using jquery-barcode.js plugin.(http://www.jqueryscript/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>

• javascript
• jquery
• html

Share Improve this question Follow edited Oct 28, 2014 at 7:50 Saranga asked Oct 28, 2014 at 7:37 SarangaSaranga 52033 gold badges1111 silver badges2929 bronze badges 2

• Which plugin is barcode? Link? – Jan Hommes Commented Oct 28, 2014 at 7:42
• jqueryscript/other/… – Saranga Commented Oct 28, 2014 at 7:49

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 2

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.

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>

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.

This would work anyways

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

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)'});

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