I have the following setting
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.
.RadForm_CustomVista table.rfdRoundedWrapper:hover .rfdRoundedOuter |
{ |
background-color: #c5daed !important; |
} |
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.
3 Answers, 1 is accepted
0
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:
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:
And code behind:
Please, send us your working project, with your custom skin, so we would be able to investigate it further.
Regards,
Bojo
the Telerik team
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
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
0

Gama
Top achievements
Rank 1
answered on 25 Jun 2010, 06:56 PM
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
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
codebehind
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; |
} |
0
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:
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
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
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