Stop Telerik from styling every input on the page

6 posts, 0 answers
  1. Andrew
    Andrew avatar
    5 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 Link to this post

    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

  2. Andrew
    Andrew avatar
    5 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andrew
    Andrew avatar
    5 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 in reply to Andrew Link to this post

    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


  5. Bozhidar
    Admin
    Bozhidar avatar
    678 posts

    Posted 04 Feb 2014 Link to this post

    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.
  6. vinay
    vinay avatar
    1 posts
    Member since:
    Nov 2014

    Posted 16 Dec 2014 in reply to Bozhidar Link to this post

    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 . 
  7. Danail Vasilev
    Admin
    Danail Vasilev avatar
    1492 posts

    Posted 18 Dec 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017