disabled textboxes and rounded corners

[Gama]

I have the following setting

.RadForm_CustomVista table.rfdRoundedWrapper:hover .rfdRoundedOuter
{
    background-color: #c5daed !important;
}

This colors the side of rounded input controls. My problem is that I'd like to have it not apply to disabled textboxes, but I can't seem to figure out how to do that.

Another problem is that if I disable the textboxes in the codebehind, the side borders will disappear entirely.

Thanks

EDIT: On further examination, I've discovered that the missing side borders happens with a RadMultipage with RenderSelectedPageOnly="false" for disabled textboxes if they are on a tab that is not currently selected when a postback occurs.

[Bozhidar]

Hello Gama,

For modern browsers that support CSS 3, we use border-radius property to create rounded corners of the input elements. For Firefox, Safari, Opera, you could use the following CSS rule to disable changing border color on hover when the element is disabled:

.RadForm_CustomVista.rfdTextbox .rfdInputDisabled:hover
 {
  border: 1px solid #000;
 }

Please, note that the color #000 (Black) is related to the custom color palette and would be different for every skin.

Unfortunately Internet Explorer, up to version 8, does not support border-radius property. To mimic rounded corners for IE, we render HTML table around the element. And we apply some styles to that table colorize the input borders. However, actually the table cells were colorized and not the real input element. So it is impossible to apply border-color radius to disabled textboxes in IE.

As for the second problem, with disappearing borders, I couldn`t reproduce it with the following code:

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"
        Skin="Hay"></telerik:RadFormDecorator>
    <div>

        <br />

    <asp:Button ID="button1" runat="server" Text="Postback" OnClick="button1_Click" />
        <telerik:RadTabStrip ID="tabstrip1" runat="server" MultiPageID="MultiPage1">
            <Tabs>
                <telerik:RadTab Text="Tab1" PageViewID="PageView1">
                </telerik:RadTab>
                <telerik:RadTab Text="Tab2" PageViewID="PageView2" Selected="true">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="MultiPage1" runat="server" Width="400px" Height="400px"
            RenderSelectedPageOnly="false">
            <telerik:RadPageView ID="PageView1" runat="server">
                <br />
                <br />
                <asp:TextBox ID="TextBox1" Enabled="true" runat="server" TextMode="MultiLine" Text="Enter Text..."></asp:TextBox>
            </telerik:RadPageView>
            <telerik:RadPageView ID="PageView2" runat="server" Selected="true">
            SOME CONTENT
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    </form>

 
And code behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class BugAndTickets_RFDButtonFF_Default : System.Web.UI.Page
{
    protected void button1_Click(object sender, EventArgs e)
    {
        TextBox1.Enabled = false;
    }
}

Please, send us your working project, with your custom skin, so we would be able to investigate it further.

Regards,
Bojo
the Telerik team

[Gama]

Hi Bojo,

The disappearing borders turned out to be a combination of two problems.  Under certain circumstances, a texbox with rounded corners will show the original straight borders in addition to the rounded ones.  To fix this, we set a style on our textboxes to remove the left and right borders.  This let us only see the rounded ones.  The problem is that the issue I described previously doesn't actually make side borders disappear.  Rather, it prevents the curved borders from being added.  This would leave only the straight borders, but since our style removes the straight borders, we are left with no borders.  I believe it also has to do with preventing a postback when the tabs are changed.  We set the following property on the tabstrip

OnClientTabSelecting

 

="function onTabSelecting(sender, args) {args.get_tab().set_postBack(false);}"

 

 

This is all in ie8.  I put in 4 textboxes on the second tab to illustrate.  The button is just there to cause a postback.  The enabled properties are changed in the form_load.  If it makes any difference, this is on a client page.  The formdecorator is on the master page.

aspx

<asp:Content runat="server" ID="ManageClientContent" ContentPlaceHolderID="MainContentPlaceHolder">
    <%--    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <telerik:RadAjaxPanel ID="upFields" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">--%>
    <telerik:RadSkinManager ID="SkinManager1" runat="server">
    </telerik:RadSkinManager>
    <div style="padding-top: 10px;">
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
            OnTabClick="RadTabStrip1_TabClick" OnClientTabSelecting="function onTabSelecting(sender, args) {args.get_tab().set_postBack(false);}" SelectedIndex="1" EnableEmbeddedSkins="false"
            CausesValidation="false">
            <Tabs>
                <telerik:RadTab Text="Services" TabIndex="17" Selected="True" Font-Bold="true">
                </telerik:RadTab>
                <telerik:RadTab Text="Billing" TabIndex="28" Font-Bold="true">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" ScrollBars="Auto"
            EnableAjaxSkinRendering="true" RenderSelectedPageOnly="false">
            <telerik:RadPageView CssClass="tab" ID="Services" runat="server" Height="240px">
            </telerik:RadPageView>
            <telerik:RadPageView CssClass="tab" ID="Billing" runat="server" Height="240px">
<table cellpadding="0">
                <tr>
                    <td>
                        <telerik:RadTextBox ID="RadTextBox1" runat="server" TabIndex="34" MaxLength="19" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <telerik:RadTextBox ID="RadTextBox2" runat="server" TabIndex="38" MaxLength="16" />
                    </td>
                    </tr><tr>
                    <td>
                        <telerik:RadTextBox ID="RadTextBox3" runat="server" TabIndex="40" MaxLength="19" style="border-left:none; border-right:none">
                        </telerik:RadTextBox>
                    </td>
                    </tr><tr>
                    <td>
                        <telerik:RadTextBox ID="RadTextBox4" runat="server" TabIndex="41" MaxLength="19" style="border-left:none; border-right:none">
                        </telerik:RadTextBox>
                    </td>
                </tr>
            </table>

            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    <table width="100%">
        <tr>
            <td style="padding-top: 5px;">
                <asp:Button ID="btnSave" runat="server" Text="OK" TabIndex="114" />
            </td>
        </tr>
    </table>


</asp:Content>

codebehind

        protected void Page_Load(object sender, EventArgs e)
        {
            RadTextBox1.Enabled = !RadTextBox1.Enabled;
            RadTextBox3.Enabled = !RadTextBox3.Enabled;

        }

[Bozhidar]

Hi Gama,

To remove the unwanted left and right borders, and to have rounded corners on RadInput, decorated by RadFormDecorator, you should set to the texboxes Skin=""  - by setting the skin to an empty string they will be decorated properly with rounded corners. However, there will be unwanted left and right borders, that appears on hover. To remove them, you should use a style. Please find the following code that provides the needed solution - marked in yellow are the changes that I made compared to your code:

<!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">
        .rfdTextbox input[type='text'] {border-left: none\9 !important; border-right: none\9 !important;}
        </style>

    <script type="text/javascript">
        function onTabSelecting(sender, args)
        {
            args.get_tab().set_postBack(false);
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadFormDecorator ID="FormDecorator1" runat="server" DecoratedControls="all"
        Skin="Hay"></telerik:RadFormDecorator>

    <div style="padding-top: 10px;">
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1"
            OnClientTabSelecting="function onTabSelecting(sender, args) {args.get_tab().set_postBack(false);}"
            SelectedIndex="1" CausesValidation="false">
            <Tabs>
                <telerik:RadTab Text="Services" TabIndex="17" Selected="True" Font-Bold="true">
                </telerik:RadTab>
                <telerik:RadTab Text="Billing" TabIndex="28" Font-Bold="true">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" ScrollBars="Auto"
            EnableAjaxSkinRendering="true" RenderSelectedPageOnly="false">
            <telerik:RadPageView CssClass="tab" ID="Services" runat="server" Height="240px">
            </telerik:RadPageView>
            <telerik:RadPageView CssClass="tab" ID="Billing" runat="server" Height="240px">
                <table cellpadding="0">
                    <tr>
                        <td>
                            <telerik:RadTextBox ID="RadTextBox1" runat="server" TabIndex="34" MaxLength="19"
                                Skin="" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadTextBox ID="RadTextBox2" runat="server" TabIndex="38" MaxLength="16" Skin="" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadTextBox ID="RadTextBox3" runat="server" TabIndex="40" MaxLength="19" Skin="">
                            </telerik:RadTextBox>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadTextBox ID="RadTextBox4" runat="server" TabIndex="41" MaxLength="19" Skin="">
                            </telerik:RadTextBox>
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
    </form>
</body>
</html>

The CSS code int he header will be rendered in Internet Explorer only, as Firefox, Safari, Opera don`t need that fix.

Please, find attached roundedinputfixed.gif showing the result from the above code in Internet Explorer 8.

Greetings,
Bojo
the Telerik team