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

Stop Telerik from styling every input on the page

5 Answers 269 Views
Button
This is a migrated thread and some comments may be shown as answers.
Andrew
Top achievements
Rank 1
Andrew asked on 03 Feb 2014, 03:10 AM
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

5 Answers, 1 is accepted

Sort by
0
Andrew
Top achievements
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.
0
Andrew
Top achievements
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):

.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
Bozhidar
Telerik team
answered on 04 Feb 2014, 12:10 PM
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:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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
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 . 
0
Danail Vasilev
Telerik team
answered on 18 Dec 2014, 12:41 PM
Hello,

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.

 
Tags
Button
Asked by
Andrew
Top achievements
Rank 1
Answers by
Andrew
Top achievements
Rank 1
Bozhidar
Telerik team
vinay
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or