Metrotouch radios and checkboxes on Chrome

2 posts, 0 answers
  1. Fit2Page
    Fit2Page avatar
    345 posts
    Member since:
    Feb 2007

    Posted 14 Aug 2014 Link to this post

    Upon using a Radformdecorator custom Metrotouch skin, we noticed radio’s and checkboxes don’t show  on chrome browser.
          
    Using Chrome
    36.0.1985.143 m
        
    Downloaded latest
    Telerik_UI_for_ASP.NET_AJAX_2014_2_724_Dev_hotfix.zip

    We have found some ‘errors’ in css
        
    Missing ‘!important’ declarations     

    After this radio’s and checkboxes work again.
    @media screen and (-webkit-min-device-pixel-ratio:0) {
     
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"] {
        background-repeat: no-repeat;
        background-position: 0 3px!important;
    }
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"]:hover {
        background-position: -40px 3px!important;
    }
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"]:checked {
        background-position: 0 -37px!important;
    }
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"]:hover:checked {
        background-position: -40px -37px!important;
    }
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"][disabled], .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"][disabled]:hover {
        background-position: 0 -117px!important;
    }
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"][disabled]:checked, .RadForm_MetroTouchNeutral.rfdCheckbox input[type="checkbox"][disabled]:checked:hover {
        background-position: 0 -157px!important;
    }
    .RadForm_MetroTouchNeutral.rfdRadio input[type="radio"] {
        background-repeat: no-repeat;
        background-position: -80px 3px!important;
    }
    .RadForm_MetroTouchNeutral.rfdRadio input[type="radio"]:hover {
        background-position: -120px 3px!important;
    }
    .RadForm_MetroTouchNeutral.rfdRadio input[type="radio"]:checked {
        background-position: -80px -37px!important;
    }
    .RadForm_MetroTouchNeutral.rfdRadio input[type="radio"]:hover:checked {
        background-position: -120px -37px!important;
    }
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="radio"][disabled], .RadForm_MetroTouchNeutral.rfdCheckbox input[type="radio"][disabled]:hover {
        background-position: -80px -117px!important;
    }
    .RadForm_MetroTouchNeutral.rfdCheckbox input[type="radio"][disabled]:checked, .RadForm_MetroTouchNeutral.rfdCheckbox input[type="radio"][disabled]:checked:hover {
        background-position: -80px -157px!important;
    }
    }

    Marc
  2. Misho
    Admin
    Misho avatar
    129 posts

    Posted 19 Aug 2014 Link to this post

    Hello,

    I've tried to replicate the unwanted behavior that you are experiencing with decorated radios and checkboxes on my side but no avail. Here is a video showing my test:
    http://screencast.com/t/8tdJm8zIDp
    and the markup I've tested with:
    <asp:ScriptManager runat="server"></asp:ScriptManager>
           <telerik:RadSkinManager runat="server" ShowChooser="true"></telerik:RadSkinManager><br />
           <telerik:RadFormDecorator runat="server" DecoratedControls="All" />
           <input id="Button1" type="radio" name="name1" value="Test1" /><label for="Button1"> Test1</label><br />
           <input id="Button2" type="radio" name="name1" value="Test2" /><label for="Button2"> Test2</label><br />
           <input id="Button3" type="checkbox" name="name2" value="test3"/><label for="Button3"> Test3</label><br />
           <input id="Button4" type="checkbox" name="name2" value="test4"/><label for="Button4"> Test4</label><br />

    The issue might be related to the custom CSS you've applied to the skin.
    You may find the following article useful for creating your own custom skin:
    http://www.telerik.com/help/aspnet-ajax/introduction-create-custom-skin.html
    http://www.telerik.com/help/aspnet-ajax/formdecorator-creating-custom-skins.html
    Please don't hesitate to contact us if you have questions.

    I hope you will find this information helpful.

    Regards,
    Misho
    Telerik
     
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top