captcha on one line

2 posts, 0 answers
  1. Bharani Mani
    Bharani Mani avatar
    40 posts
    Member since:
    Dec 2009

    Posted 23 Dec 2009 Link to this post

    Hello,
                 How do i create captcha image, textbox and the button all on one line?.. Please do let me know.

    Thanks,
    Bharani
  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 24 Dec 2009 Link to this post

    Hello Bharani,

    The easiest way to achieve the desired effect is render only the CaptchaImage and choose which textbox will be validated. For example in the following project I have put the Captcha control in the first of the two table-cells, and the TextBox together with the Button in the second.

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .tdClass
            {
                vertical-align: bottom;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <table>
                <tr>
                    <td>
                        <telerik:RadCaptcha ID="RadCaptcha1" runat="server" ErrorMessage="Wrong Input" Width="192px"
                            ValidatedTextBoxID="TextBox1">
                            <CaptchaImage RenderImageOnly="true" />
                        </telerik:RadCaptcha>
                    </td>
                    <td class="tdClass">
                        Enter the code:<br />
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <asp:Button ID="Button1" runat="server" Text="Validate Input" CausesValidation="true" />
                    </td>
                </tr>
            </table>
        </div>
        </form>
    </body>
    </html>

    Please note that this is not the only way to place the Image, TextBox and Button on a single line. You can use custom CSS code (e.g. float: left the Image, TextBox and Button) to achieve the desired layout.


    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top