RadCaptcha compatibility to Chrome browser

5 posts, 0 answers
  1. Bhanu Prakash
    Bhanu Prakash avatar
    4 posts
    Member since:
    Jan 2013

    Posted 26 Mar 2013 Link to this post

    We designed our Login page and used radCaptcha along with Generate New Image (EnableRefreshImage Option) and Vision Impaired (CaptchaImage.EnableCaptchaAudio Option).  These option links are working fine in IE and FireFox but not in Chrome.  In Chrome these are rendered like static text.  I am attaching image of Login page.  Following is the code I am using in Login page. 

    This is the ASPX code
    <telerik:RadCaptcha ID="CaptchaCode" runat="server" ValidationGroup="SubmitGroup"
          CaptchaTextBoxLabel=" Type the code from the image"  CaptchaImage-TextChars="Numbers" BorderColor="Black"
          BorderWidth="0" ErrorMessage="" CaptchaImage-Height="40" CaptchaImage-Width="155"
          width="150"  CssClass="font_captcha" ForeColor="Black"  Display ="Dynamic" TabIndex =3 >
    </telerik:RadCaptcha>                     
    T
    his is the Server side code.
    Private Sub Pages_Login_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            Response.Cache.SetCacheability(System.Web.HttpCacheability.NoCache)
            AddHandler Me.loginButton.Click, New System.EventHandler(AddressOf loginButton_Click)
     
            If Not Page.IsPostBack Then
                CaptchaCode.EnableRefreshImage = True
                CaptchaCode.CaptchaLinkButtonText = "Generate New Image"
                CaptchaCode.CaptchaImage.EnableCaptchaAudio = True
                CaptchaCode.CaptchaAudioLinkButtonText = "Vision Impaired"
                CaptchaCode.CaptchaImage.UseAudioFiles = False
                CaptchaCode.CaptchaImage.AudioFilesPath = HttpContext.Current.Server.MapPath("~/App_Data/RadCaptcha")
     
                Page.DataBind()
            End If
            txtUserID.Focus()
        End Sub

    This is CSS Code.
    .font_captcha
    {
        text-align:left;
        color: white;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 9px;
        font-weight: normal;
    }
    .rcRefreshImage
    {
        margin-left: 165px;
        margin-top :-40px;
        font-size: 10px;
        float: left;
        color: White;
        display: block;
        line-height:1.5em;
        background-image: url('../Images/Captcha_reload.png');
        background-repeat: no-repeat;
        height: 20px;
        padding-left: 30px;
        margin-top:-40px;
        width: 120px;
                
    }  
    .rcCaptchaAudioLink
    {
        margin-left: 165px;
        margin-top :-17px;
        font-size: 10px;
        float: left;
        color: White;
        display: block;
        line-height: 1.5em;
        background-image: url('../Images/Captcha_audio.png');
        background-repeat: no-repeat;
        height: 19px;
        padding-left: 30px;
        margin-top:-20px;
        width: 120px;
    }
    If this is not clear, I can attach a sample project.
    Please let me know whether I am doing any thing wrong or really radCaptcha is having compatibility issues with Chrome browser. 
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Mar 2013 Link to this post

    Hi Bhanu,

    RadCaptcha does not have any compatibility issues with Chrome as far as I know. I tried your code without the CSS you applied and then its working fine as expected. Please check the following code which works fine at my end.

    ASPX:
    <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Invalid Captcha" CaptchaImage-EnableCaptchaAudio="true"
        CaptchaImage-TextLength="5" CaptchaImage-TextColor="Red" IgnoreCase="true" EnableRefreshImage="true"
        CaptchaImage-RenderImageOnly="true" ValidationGroup="Group" ValidatedTextBoxID="RadTextBox1">
    </telerik:RadCaptcha>
    <br />
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
    </telerik:RadTextBox>
    <br />
    <telerik:RadButton ID="RadButton1" runat="server" Text="Submit" ValidationGroup="Group"
        OnClick="RadButton1_Click">
    </telerik:RadButton>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bhanu Prakash
    Bhanu Prakash avatar
    4 posts
    Member since:
    Jan 2013

    Posted 29 Mar 2013 Link to this post

    Hi Princy,
    Thank you for your response.  It is working fine without CSS.  But we are using CSS to format the Refresh and Audio links and that is making it not working in Google Chrome.  This is working fine in Firefox and IE but not in Chrome.  Both links are formatted like links, but act like a static Underlined Text in Chrome.  I am attaching the background images we are using for links in CSS also.  I even attached Login Page screen shot how it looks like in Chrome.  I am using internal textbox and not external textbox for Captcha.  Please try this and let me know, what wrong I am doing.
    .font_captcha
    {
        text-align:left;
        color: white;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 9px;
        font-weight: normal;
    }
    .rcRefreshImage
    {
        margin-left: 165px;
        margin-top :-40px;
        font-size: 10px;
        float: left;
        color: White;
        display: block;
        line-height:1.5em;
        background-image: url('../Images/Captcha_reload.png');
        background-repeat: no-repeat;
        height: 20px;
        padding-left: 30px;
        margin-top:-40px;
        width: 120px;
                 
    }  
    .rcCaptchaAudioLink
    {
        margin-left: 165px;
        margin-top :-17px;
        font-size: 10px;
        float: left;
        color: White;
        display: block;
        line-height: 1.5em;
        background-image: url('../Images/Captcha_audio.png');
        background-repeat: no-repeat;
        height: 19px;
        padding-left: 30px;
        margin-top:-20px;
        width: 120px;
    }
  5. Bhanu Prakash
    Bhanu Prakash avatar
    4 posts
    Member since:
    Jan 2013

    Posted 15 Apr 2013 Link to this post

    Hi Princy,
    It is working fine without CSS.  But we are using CSS to format the Refresh and Audio links and that is making it not working in Google Chrome.  This is working fine in Firefox and IE but not in Chrome.  Both links are formatted like links, but act like a static Underlined Text in Chrome.  I am attaching the background images we are using for links in CSS also.  I even attached Login Page screen shot how it looks like in Chrome.  I am using internal textbox and not external textbox for Captcha.  Please try this and let me know, what wrong I am doing.
    .font_captcha
    {
        text-align:left;
        color: white;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 9px;
        font-weight: normal;
    }
    .rcRefreshImage
    {
        margin-left: 165px;
        margin-top :-40px;
        font-size: 10px;
        float: left;
        color: White;
        display: block;
        line-height:1.5em;
        background-image: url('../Images/Captcha_reload.png');
        background-repeat: no-repeat;
        height: 20px;
        padding-left: 30px;
        margin-top:-40px;
        width: 120px;
                 
    }  
    .rcCaptchaAudioLink
    {
        margin-left: 165px;
        margin-top :-17px;
        font-size: 10px;
        float: left;
        color: White;
        display: block;
        line-height: 1.5em;
        background-image: url('../Images/Captcha_audio.png');
        background-repeat: no-repeat;
        height: 19px;
        padding-left: 30px;
        margin-top:-20px;
        width: 120px;
    }
  6. Bhanu Prakash
    Bhanu Prakash avatar
    4 posts
    Member since:
    Jan 2013

    Posted 15 Apr 2013 Link to this post

    Hi Princy,
    Any Update on this?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017