Horizontal Position of Barcode

[Frank]

I am having trouble horizontally centering the text under the barcode. See the attached image. Thanks!

[Princy]

Hi Frank,

Unfortunately I couldn't replicate this issue at my end. Please check the following code I tried which works fine at my end.

ASPX:

<telerik:RadBarcode runat="server" ID="RadBarcode1" Type="Code11" Text="123412341234"
    ShortLinesLengthPercentage="50" VerticalTextPositionPercentage="65" Font-Size="20px">
</telerik:RadBarcode>

Please get back to us with your full code if this doesn't help.

Thanks,
Princy.

[Vasil]

Hi Frank,

The HTML text-align attribute, also affects the SVG elements in some browsers. So if your text is miss-aligned, check the CSS on the page. You can inspect the text using browser developer tools and see what styles are applied to it.

Regards,
Vasil
Telerik

[Frank]

I think I discovered the problem, namely IE 8. Princy, I tried your code on IE 8 on my machine and I was still having problems. I tried it in Chrome, no more problems. Well, except for the fact that many of the PCs we are targeting this application for still use XP and have IE 8 unfortunately.

[Vasil]

Hi Frank,

In IE8 the SVG is converted to VML. And the text has absolute position, however since there is no equivalent of the text-anchor: middle, the text starts from the middle and it is wrongly aligned. You can override the Telerik.Web.UI.RadBarcode.prototype._getVmlTextboxHtmlFromSvgText function to change the X of the textbox element. The original function is:

_getVmlTextboxHtmlFromSvgText = function (text, wrapperWidth, wrapperHeight)
{
    var x = this._convertPercentageStringToFloat(text.x);
    var y = this._convertPercentageStringToFloat(text.y);

    var textBox = "<v:textbox";
    textBox += " style='position: absolute;left: ";
    textBox += x * wrapperWidth * 0.01;
    textBox += "px;top: ";
    textBox += y * wrapperHeight * 0.01;
    textBox += "px;'";
    textBox += ">";
    textBox += text.innerHTML;
    textBox += "</v:textbox>";
    return textBox;
}

Modify the X by your requirements.

If we find a universal way for fixing it, I will let you know.

Regards,
Vasil
Telerik

[Mariah]

this barcode image can be set whatever you want it to be