Rounded Corners w/ Watermark

4 posts, 0 answers
  1. Chad Canterbury
    Chad Canterbury avatar
    13 posts
    Member since:
    Aug 2012

    Posted 05 May 2010 Link to this post

    I have asp:textbox that is not visible when the page loads. With a click event I make it visible. I am using RadAjaxManager. The textboxes that have watermark extenders, when they become visible the corners are not rounded, but the textboxes without watermark extenders do have rounded corners. Can someone please help.
  2. Chad Canterbury
    Chad Canterbury avatar
    13 posts
    Member since:
    Aug 2012

    Posted 05 May 2010 Link to this post

    If you have a textbox with a watermark extender, it does not have rounded corners in FireFox.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chad Canterbury
    Chad Canterbury avatar
    13 posts
    Member since:
    Aug 2012

    Posted 06 May 2010 Link to this post

    If you have an asp:Textbox on a page that has a TextBoxWatermarkExtender that has WatermarkCSS defined, and is not visible on the page load, when the textbox becomes visible, the corners will not be rounded.

    If the textbox is visble on page load, you can toggle the visibility and it maintains the rounded corners. But this is only if you have the WatermarkCSS defined. If there is no CSS, the corners are rounded.

    Is there was way to get rounded corners with the Watermark?
    <%@ Page Language="VB" AutoEventWireup="false"  %> 
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml">  
    <head runat="server">  
        <title></title>  
        <style type="text/css">  
            .watermark {  
                color: #808080 !important;  
                font-style: italic;  
            }  
        </style> 
     
        <script type="text/javascript">  
        //JUST FOR TOGGLING PURPOSES  
            function panelVis1() {  
                if (document.getElementById("Label2").innerHTML == "Hidden") {  
                    document.getElementById("Panel1").style.display = "block";  
                    document.getElementById("Label2").innerHTML = "Visible";  
                }  
                else {  
                    document.getElementById("Panel1").style.display = "none";  
                    document.getElementById("Label2").innerHTML = "Hidden";  
                }  
            }  
            function panelVis2() {  
                if (document.getElementById("Label3").innerHTML == "Hidden") {  
                    document.getElementById("Panel2").style.display = "block";  
                    document.getElementById("Label3").innerHTML = "Visible";  
                }  
                else {  
                    document.getElementById("Panel2").style.display = "none";  
                    document.getElementById("Label3").innerHTML = "Hidden";  
                }  
            }  
            function panelVis3() {  
                panelVis1();  
                panelVis2();  
            }  
        </script> 
     
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Textbox" /> 
        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 
        <ajaxToolkit:TextBoxWatermarkExtender ID="TextBox3_TextBoxWatermarkExtender" runat="server" 
            Enabled="True" TargetControlID="TextBox3" WatermarkText="with watermark no CSS">  
        </ajaxToolkit:TextBoxWatermarkExtender> 
        &nbsp;&lt;--Controls  
        <br /> 
        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox> 
        <ajaxToolkit:TextBoxWatermarkExtender ID="TextBox4_TextBoxWatermarkExtender" runat="server" 
            Enabled="True" TargetControlID="TextBox4" WatermarkCssClass="watermark" WatermarkText="with watermark w/ CSS">  
        </ajaxToolkit:TextBoxWatermarkExtender> 
        <br /> 
        <br /> 
        <table cellpadding="0" cellspacing="0">  
            <tr> 
                <td style="width: 300px">  
                    <href="javascript:panelVis1()">Panel 1 Visibility</a> 
                </td> 
                <td style="width: 300px">  
                    <href="javascript:panelVis2()">Panel 2 Visibility</a> 
                </td> 
                <td style="width: 123px">  
                    <href="javascript:panelVis3()">Toggle Both</a> 
                </td> 
            </tr> 
            <tr> 
                <td style="width: 300px">  
                    <asp:Label ID="Label2" runat="server" Text="Hidden" /> 
                </td> 
                <td style="width: 300px">  
                    <asp:Label ID="Label3" runat="server" Text="Visible" /> 
                </td> 
                <td style="width: 123px">  
                    &nbsp;  
                </td> 
            </tr> 
            <tr> 
                <td style="width: 300px">  
                    <asp:Panel ID="Panel1" runat="server" Style="border: solid 1px black; padding: 10px;  
                        width: 200px; display: none;"> 
                        Panel Hidden At Start<br /> 
                        <asp:TextBox ID="TextBox5" runat="server" AutoPostBack="True"></asp:TextBox> 
                        <ajaxToolkit:TextBoxWatermarkExtender ID="TextBox5_TextBoxWatermarkExtender" runat="server" 
                            Enabled="True" TargetControlID="TextBox5" WatermarkCssClass="watermark" WatermarkText="with watermark w/ CSS">  
                        </ajaxToolkit:TextBoxWatermarkExtender> 
                        <br /> 
                        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="True"></asp:TextBox> 
                        <ajaxToolkit:TextBoxWatermarkExtender ID="TextBox1_TextBoxWatermarkExtender" runat="server" 
                            Enabled="True" TargetControlID="TextBox1" WatermarkText="with watermark no CSS">  
                        </ajaxToolkit:TextBoxWatermarkExtender> 
                        <br /> 
                        <asp:TextBox ID="TextBox2" runat="server">no watermark</asp:TextBox> 
                    </asp:Panel> 
                </td> 
                <td style="width: 300px">  
                    <asp:Panel ID="Panel2" runat="server" Style="border: solid 1px black; padding: 10px;  
                        width: 200px;"> 
                        Panel Visible At Start<br /> 
                        <asp:TextBox ID="TextBox6" runat="server" AutoPostBack="True"></asp:TextBox> 
                        <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server" 
                            Enabled="True" TargetControlID="TextBox6" WatermarkCssClass="watermark" WatermarkText="with watermark w/ CSS">  
                        </ajaxToolkit:TextBoxWatermarkExtender> 
                        <br /> 
                        <asp:TextBox ID="TextBox7" runat="server" AutoPostBack="True"></asp:TextBox> 
                        <ajaxToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender2" runat="server" 
                            Enabled="True" TargetControlID="TextBox7" WatermarkText="with watermark no CSS">  
                        </ajaxToolkit:TextBoxWatermarkExtender> 
                        <br /> 
                        <asp:TextBox ID="TextBox8" runat="server">no watermark</asp:TextBox> 
                    </asp:Panel> 
                </td> 
                <td style="width: 123px">  
                    &nbsp;  
                </td> 
            </tr> 
        </table> 
        <br /> 
        </form> 
    </body> 
    </html> 
     


  5. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 11 May 2010 Link to this post

    Hello Tony,

    I just answered your support ticket on the same subject. For convenience I am pasting my reply below:


    We investigated the case and we see what the problem is but to our regret, there is no suitable workaround for it.
    The reason for this problem is in the way TextBoxWatermarkExtender and RadFormDecorator work. By design RadFormDecorator will not style elements that have a class name assigned to it. The TextBoxWatermarkExtender on the other hand is using Class property for adding its CSS to the input control.
    What happens is:
    1. The page is loaded and the visible elements are being decorated. The decoration process is done in several steps (due to different logic for different browsers)
    2. At some point, TextBoxWatermarkExtender adds a class property to the textboxes with code (if you check the HTML dump of the page, you will notice that there is no class property for the inputs)
    3. From this point on, and when the panel is made visible, RadFormDecorator does style the inputs because they already have a Class property assigned to it.

    We tried to find a workaround for this issue, but since we cannot control the way TextBoxWatermarkExtender works, we were not able to find a suitable solution that would produce consistent behavior.


    Kind regards,
    Georgi Tunev
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top