Howdy,
I have an issue where Telerik is styling my submit input fields.
For example this one:
<input type="submit" name="search" value="Book Now">
Get's automatically styled with the Telerik RadButton style using the Default Skin for the project (with is MetroTouch).
I have attached a screenshot of what happens.
Thanks
Andrew
I have an issue where Telerik is styling my submit input fields.
For example this one:
<input type="submit" name="search" value="Book Now">
Get's automatically styled with the Telerik RadButton style using the Default Skin for the project (with is MetroTouch).
I have attached a screenshot of what happens.
Thanks
Andrew
5 Answers, 1 is accepted
0
Andrew
Top achievements
Rank 1
Rank 1
answered on 03 Feb 2014, 03:54 AM
Futher investigation I see that it is attaching itself on the HTML tag:
<html lang="en-US" class="csstransforms csstransforms3d csstransitions RadForm RadForm_MetroTouch rfdButton rfdScrollBars rfdRadio rfdCheckbox">
Temporarily disabling Javascript in the browser and reloading the page returns:
<html lang="en-US">
So something in Javascript land is causing this to happen.
<html lang="en-US" class="csstransforms csstransforms3d csstransitions RadForm RadForm_MetroTouch rfdButton rfdScrollBars rfdRadio rfdCheckbox">
Temporarily disabling Javascript in the browser and reloading the page returns:
<html lang="en-US">
So something in Javascript land is causing this to happen.
0
Andrew
Top achievements
Rank 1
Rank 1
answered on 03 Feb 2014, 05:32 AM
There are a large number of !important CSS styles overriding the button.
It appears the easiest way to change the button color is by using the following CSS selector (for others that might have this issue - replace MetroTrouch with the name of the Skin found in the CSS class on the HTML tag):
Thanks
ANdrew
It appears the easiest way to change the button color is by using the following CSS selector (for others that might have this issue - replace MetroTrouch with the name of the Skin found in the CSS class on the HTML tag):
.RadForm_MetroTouch.rfdButton .rfdSkinnedButton input.rfdDecorated[type="button"], .RadForm_MetroTouch.rfdButton .rfdSkinnedButton input.rfdDecorated[type="reset"], .RadForm_MetroTouch.rfdButton .rfdSkinnedButton input.rfdDecorated[type="submit"], .RadForm_MetroTouch.rfdButton .rfdSkinnedButton button, .RadForm_MetroTouch.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover * {background-color: Green;}Thanks
ANdrew
0
Hi,
Thanks for contacting Telerik support. As I could see from your description, it is expected, when using RadFormDecorator on the page to decorate all you form elements, including submit buttons. If you like any button to be skipped form decoration, it is not necessary to override any styles, but to simply add class property for HTML element and CssClass property for ASPX element. In your case, it should be similar - note that I just applied some styles to the button to mimic the button from the attached image:
As you could see, I don't override any FormDecorator styles, but the button is only styled by the CSS included in the head section of the document. If you remove the styles form there, you'll find that the button will appear in its base browser style.
Regards,
Bozhidar
Telerik
Thanks for contacting Telerik support. As I could see from your description, it is expected, when using RadFormDecorator on the page to decorate all you form elements, including submit buttons. If you like any button to be skipped form decoration, it is not necessary to override any styles, but to simply add class property for HTML element and CssClass property for ASPX element. In your case, it should be similar - note that I just applied some styles to the button to mimic the button from the attached image:
<!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"> .bookNow { background-color: Green; color: White; font-weight: bold; width: 150px; border: 0; height: 30px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadFormDecorator runat="server" DecoratedControls="All" Skin="MetroTouch" /> <input type="submit" name="search" value="Book Now" class="bookNow" /> </form></body></html>As you could see, I don't override any FormDecorator styles, but the button is only styled by the CSS included in the head section of the document. If you remove the styles form there, you'll find that the button will appear in its base browser style.
Regards,
Bozhidar
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
0
vinay
Top achievements
Rank 1
Rank 1
answered on 16 Dec 2014, 02:36 PM
HI ,
Even i got the same issue. I have applied CSSclass to the textboxes available in User control. But at runtime the css class is overrided and added with rfdDecorated class to the existing class. can anyone help me on this .
Even i got the same issue. I have applied CSSclass to the textboxes available in User control. But at runtime the css class is overrided and added with rfdDecorated class to the existing class. can anyone help me on this .
0
Hello,
You can use the radPreventDecorate class. For example:
ASPX:
Regards,
Danail Vasilev
Telerik
You can use the radPreventDecorate class. For example:
ASPX:
<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" /><asp:TextBox ID="Textbox1" runat="server" CssClass="radPreventDecorate" />Regards,
Danail Vasilev
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.