This is a migrated thread and some comments may be shown as answers.

Rounded Corners w/ Watermark

3 Answers 121 Views

FormDecorator

This is a migrated thread and some comments may be shown as answers.

3 Answers, 1 is accepted

answered on 06 May 2010, 08:29 PM

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">  
        
                            <a href="javascript:panelVis1()">Panel 1 Visibility</a> 
        
                        </td> 
        
                        <td style="width: 300px">  
        
                            <a href="javascript:panelVis2()">Panel 2 Visibility</a> 
        
                        </td> 
        
                        <td style="width: 123px">  
        
                            <a 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>

answered on 11 May 2010, 02:10 PM

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:

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)
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)
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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Rounded Corners w/ Watermark

3 Answers, 1 is accepted