Difference in font between Checked and Unchecked checkbox

5 posts, 1 answers
  1. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 16 Jul 2010 Link to this post

    I have a couple of checkboxes on a page that is decorated by RadFormDecorator.

    I notice that the font associated with the checkboxes changes slightly when the checked property changes. This is with 2010.2.713.

    Looking at the page using IE8's developer tools shows that there are some additional CSS properties applied when the checkbox is checked.

    You can see what I mean by comparing the 2 images attached.

    -- 
    Stuart
  2. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 19 Jul 2010 Link to this post

    Hello Stuart,

    We discovered a minor problem with misspelled font-name - "Segoe UI" is misspelled to "Segoe  UI" (note the extra space). It will be fixed in the next Q2, 2010, Service Pack 1, which is expected to be released at the end of August. For now, you could fix it, by using the following CSS in the head section of your document:

    .RadForm.rfdTextbox input[type="text"],
      
    .RadForm.rfdTextbox input[type="password"],
      
    .RadForm.rfdTextarea textarea,
      
    .RadForm.rfdTextarea textarea[disabled]:hover,
      
    .RadForm.rfdTextbox input[disabled][type="text"]:hover,
      
    .RadForm.rfdTextbox input[disabled][type="password"]:hover,
      
    .RadForm .rfdCheckboxChecked,
      
    .RadForm .rfdInputDisabled.rfdCheckboxChecked:hover
      
    .RadForm .rfdCheckboxUnchecked,
      
    .RadForm .rfdInputDisabled.rfdCheckboxUnchecked:hover,
      
    .RadForm.rfdLabel label,
      
    .RadForm .rfdRadioUnchecked,
      
    .RadForm .rfdInputDisabled.rfdRadioUnchecked:hover,
      
    .RadForm .rfdRadioUnchecked:hover,
      
    .RadForm .rfdRadioChecked,
      
    .RadForm .rfdInputDisabled.rfdRadioChecked:hover,
      
    .RadForm .rfdRadioChecked:hover
      
    {
      
        font-size: 12px;
      
        font-family: "Segoe UI",Arial,Verdana,sans-serif;
      
    }

    If the above code does not fixes the problem, please send us a small project that reproduces it, so we can investigate further.

    Greetings,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 19 Jul 2010 Link to this post

    Ah-ha!

    Good catch.

    Cheers.

    -- 
    Stuart
  5. Stuart Hemming
    Stuart Hemming avatar
    1622 posts
    Member since:
    Jul 2004

    Posted 22 Jul 2010 Link to this post

    Bojo,

    I've only just got around to testing this and noticed it didn't work.

    I'm using a theme and setting the control skin in the SkinFile.skin file (eh?)

    The point is that in the Theme folder I have a default .css file adn put the changes you suggested in there.

    I had to add "!important" to the 2 lines to get it to work.

    -- 
    Stuart
  6. Bozhidar
    Admin
    Bozhidar avatar
    679 posts

    Posted 23 Jul 2010 Link to this post

    Hi Stuart,

    Sorry for the mistake. I would had say that it is important to use !important when you put some CSS in the head section of the document, when you want to overwrite something from the base or skin specific style sheets.

    This is my mistake I didn`t mentioned to explain that, and just gave you the fix form our base stylesheet file, where it is not necessary to use the !important rule.

    In simple words, the first CSS that is loaded on the page, is those form the head section of the document. Than the base stylesheet is loaded - FormDecorator.css and finally FormDecorator.Default.css. So, if you have something in the head section, that exists also in the base or the skin specific file, it will be overwritten, as in CS,S the last rule in the row is with higher priority. And to make this in the head section heavier, you should use the !important rule to overwrite something in the base or skin specific files.

    And just to confirm, the correct CSS, that you should put in the head section for fixing the font problem:

    .RadForm.rfdTextbox input[type="text"],
       
    .RadForm.rfdTextbox input[type="password"],
       
    .RadForm.rfdTextarea textarea,
       
    .RadForm.rfdTextarea textarea[disabled]:hover,
       
    .RadForm.rfdTextbox input[disabled][type="text"]:hover,
       
    .RadForm.rfdTextbox input[disabled][type="password"]:hover,
       
    .RadForm .rfdCheckboxChecked,
       
    .RadForm .rfdInputDisabled.rfdCheckboxChecked:hover
       
    .RadForm .rfdCheckboxUnchecked,
       
    .RadForm .rfdInputDisabled.rfdCheckboxUnchecked:hover,
       
    .RadForm.rfdLabel label,
       
    .RadForm .rfdRadioUnchecked,
       
    .RadForm .rfdInputDisabled.rfdRadioUnchecked:hover,
       
    .RadForm .rfdRadioUnchecked:hover,
       
    .RadForm .rfdRadioChecked,
       
    .RadForm .rfdInputDisabled.rfdRadioChecked:hover,
       
    .RadForm .rfdRadioChecked:hover
       
    {
        font-size: 12px !important;
        font-family: "Segoe UI",Arial,Verdana,sans-serif !important;
    }

    Let me know if you install the last internal build, which will be released next week I think, if everything is OK.

    Greetings,
    Bojo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017