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

Rounded Corners w/ Watermark

3 Answers 67 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Chad Canterbury
Top achievements
Rank 1
Chad Canterbury asked on 05 May 2010, 09:36 PM
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.

3 Answers, 1 is accepted

Sort by
0
Chad Canterbury
Top achievements
Rank 1
answered on 05 May 2010, 10:03 PM
If you have a textbox with a watermark extender, it does not have rounded corners in FireFox.
0
Chad Canterbury
Top achievements
Rank 1
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">  
                <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> 
 


0
Georgi Tunev
Telerik team
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:
  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.
Tags
FormDecorator
Asked by
Chad Canterbury
Top achievements
Rank 1
Answers by
Chad Canterbury
Top achievements
Rank 1
Georgi Tunev
Telerik team
Share this question
or