Horizontal Position of Barcode

6 posts, 0 answers
  1. Frank
    Frank avatar
    5 posts
    Member since:
    Aug 2013

    Posted 21 Aug 2013 Link to this post

    I am having trouble horizontally centering the text under the barcode. See the attached image. Thanks!
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Aug 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 22 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Frank
    Frank avatar
    5 posts
    Member since:
    Aug 2013

    Posted 22 Aug 2013 Link to this post

    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.
  6. Vasil
    Admin
    Vasil avatar
    1547 posts

    Posted 27 Aug 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  7. Mariah
    Mariah avatar
    5 posts
    Member since:
    Oct 2013

    Posted 16 Apr 2014 Link to this post

    this barcode image can be set whatever you want it to be
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017