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

Difference in font between Checked and Unchecked checkbox

4 Answers 35 Views
FormDecorator
This is a migrated thread and some comments may be shown as answers.
Stuart Hemming
Top achievements
Rank 2
Stuart Hemming asked on 16 Jul 2010, 11:29 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Bozhidar
Telerik team
answered on 19 Jul 2010, 11:52 AM
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
0
Stuart Hemming
Top achievements
Rank 2
answered on 19 Jul 2010, 11:54 AM
Ah-ha!

Good catch.

Cheers.

-- 
Stuart
0
Stuart Hemming
Top achievements
Rank 2
answered on 22 Jul 2010, 09:01 PM
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
0
Bozhidar
Telerik team
answered on 23 Jul 2010, 07:31 AM
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
Tags
FormDecorator
Asked by
Stuart Hemming
Top achievements
Rank 2
Answers by
Bozhidar
Telerik team
Stuart Hemming
Top achievements
Rank 2
Share this question
or