RadMaskedTextBox Remove Wrapping CSS Classes

3 posts, 1 answers
  1. Scott
    Scott avatar
    2 posts
    Member since:
    Mar 2017

    Posted 17 Apr Link to this post

    I have a pre-existing set of styles in use for an application I'm building and the RadMaskedTextbox creates a <div /> wrapper around the control, with 
    RadInput RadInput_Default

    in the class declaration for the div. Is it possible to remove these? They override some of my default styling, so I'd rather they just don't get attached upon render at all if possible. This is for version 2017.1.228.45.

    Thanks!

  2. Answer
    Peter Milchev
    Admin
    Peter Milchev avatar
    297 posts

    Posted 20 Apr Link to this post

    Hello Scott,

    We would recommend using stronger selectors in your custom CSS. Here is an article that you might find helpful on the topic: Specifics on CSS Specificity

    Removing the RadInput class might result in not only incorrect appearance but also unexpected behavior. If you really need to remove the classes from the wrapper element, you can subscribe to the ClientEvents-OnLoad event as demonstrated below:
    <telerik:RadMaskedTextBox  ClientEvents-OnLoad="onLoad" ... ></telerik:RadMaskedTextBox>
    <script>   
        function onLoad(sender, args) {
            var wrapper = sender.get_wrapperElement();
            wrapper.classList.remove('RadInput');
            wrapper.classList.remove('RadInput_Default');
        }
    </script>

    Regards,
    Peter Milchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Scott
    Scott avatar
    2 posts
    Member since:
    Mar 2017

    Posted 22 Apr in reply to Peter Milchev Link to this post

    Peter Milchev said:Hello Scott,

    We would recommend using stronger selectors in your custom CSS. Here is an article that you might find helpful on the topic: Specifics on CSS Specificity

    Removing the RadInput class might result in not only incorrect appearance but also unexpected behavior. If you really need to remove the classes from the wrapper element, you can subscribe to the ClientEvents-OnLoad event as demonstrated below:
    <telerik:RadMaskedTextBox  ClientEvents-OnLoad="onLoad" ... ></telerik:RadMaskedTextBox>
    <script>   
        function onLoad(sender, args) {
            var wrapper = sender.get_wrapperElement();
            wrapper.classList.remove('RadInput');
            wrapper.classList.remove('RadInput_Default');
        }
    </script>

    Regards,
    Peter Milchev
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

     

    Perfect! That's exactly what I needed. Thanks!

Back to Top