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

Metrotouch radios and checkboxes on Chrome

1 Answer 14 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
Fit2Page asked on 14 Aug 2014, 01:07 PM
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

1 Answer, 1 is accepted

Sort by
0
Misho
Telerik team
answered on 19 Aug 2014, 06:59 AM
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.
Tags
FormDecorator
Asked by
Fit2Page
Top achievements
Rank 1
Iron
Veteran
Iron
Answers by
Misho
Telerik team
Share this question
or