IE CheckBox problem

3 posts, 1 answers
  1. Uros
    Uros avatar
    6 posts
    Member since:
    May 2013

    Posted 28 May 2013 Link to this post

    Hi,
    I have problems with IE showing CheckBox. It's working prefect in Chrome. In IE it's not showing checkbox at all.

    Here's the code:

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
      .RadForm_CRM {
      

     /* checkboxes */
      }

      .RadForm_CRM.rfdCheckbox input[type="checkbox"], .RadForm_CRM.rfdCheckbox input[type="checkbox"][disabled]:hover, .RadForm_CRM.rfdRadio input[type="radio"], .RadForm_CRM.rfdRadio input[type="radio"][disabled="disabled"]:hover {
        /*height: 30px;
        line-height: 30px !important;
        padding-left: 22px !important;*/
        /*background-image: url('../Common/MetroTouch/CheckBoxRadioSprites.png');
        background-repeat: no-repeat;*/
     background-position:0 0 !important; 
      }
      .RadForm_CRM.rfdCheckbox label, .RadForm_CRM.rfdRadio label {
        vertical-align: middle;
      }
      .RadForm_CRM.rfdCheckbox input[type="checkbox"], .RadForm_CRM.rfdCheckbox input[type="checkbox"][disabled]:hover {
         background-image: url('../Common/MetroTouch/CheckBox.png') !important;
     background-position:0 0 !important;
     background-repeat: no-repeat !important;
     height:24px !important;
     width:24px !important;
      }
      .RadForm_CRM.rfdCheckbox input[type="checkbox"]:hover {
        background-image: url('../Common/MetroTouch/CheckBoxHover.png') !important;
     background-position:0 0 !important;
     background-repeat: no-repeat !important;
     height:24px !important;
     width:24px !important;
      }
      .RadForm_CRM.rfdCheckbox input[type="checkbox"]:checked, .RadForm_CRM.rfdCheckbox input[type="checkbox"][disabled]:hover:checked {
        background-image: url('../Common/MetroTouch/CheckBoxChecked.png') !important;
     background-position:0 0 !important;
     background-repeat: no-repeat !important;
     height:24px !important;
     width:24px !important;
      }
      .RadForm_CRM.rfdCheckbox input[type="checkbox"]:hover:checked {
        background-image: url('../Common/MetroTouch/CheckBoxCheckedHover.png') !important;
     background-position:0 0 !important;
     background-repeat: no-repeat !important;
     height:24px !important;
     width:24px !important;
      }

    Any ideas?

    THX.

    Uros

  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    680 posts

    Posted 28 May 2013 Link to this post

    Hello,

    It seems you are using a custom Skin. The provided code snippet applies styles for webkit browsers only (Chrome). The styles inserted into:

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
          /* styles applied in Chrome only */
    }

    will be visible in Chrome, Safari and other webkit browsers only.

    IE, FireFox and Opera have another styles in the CSS code, that you should also edit. The difference is caused by the fact that webkit browsers allow to style inputs of type checkbox and radio with CSS (you could use background image to change the check and/or radio), while other browsers does not allow this, and have different approach to style them - we hide the real input and render a label with a background image that is decorated as a checkbox or radio button.

    So in order to apply the same styles in all other browsers, you have to find the specific styles and to apply what you want.

    Regards,
    Bozhidar
    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
  4. Uros
    Uros avatar
    6 posts
    Member since:
    May 2013

    Posted 29 May 2013 Link to this post

    Thank you for your help :)

    Regards, Uros
Back to Top