How do I hide the label for a CheckBox with CSS

[Shawn]

Hello,

I use RadCheckBox in my RadGrid in a template column, but I don't want to set any labels for the checkboxes, and I can't use a checkbox column.  I realize that when I give no value to the "Text" attribute of the checkbox no text will be displayed, however, there is a space after the checkbox where the label would be.  This label makes the checkbox look off-centered in the column when I set the "HorizontalAlign" attribute of the ItemStyle to "Center".  I would like to assign a CSS style to any individual checkbox, and I don't want to create a whole new skin to achieve this.  Is there a way to do this?  Can anyone show me an example of a CSS style that will hide the label associated to a RadCheckBox?  Thanks.

 

[Marin Bratanov]

Hello Shawn,

You can devise a  CSS rule like this to hide/modify elements in a grid:

.RadGrid .RadButton.RadCheckBox .rbText{
   display:none;
 }
.RadGrid .RadButton.RadCheckBox .rbIcon {
        margin-right: 0;
 }

The .RadGrid selector makes sure that these rules are only in effect for checkboxes inside a RadGrid. You can modify it further to include a specific class your grid has if you don't want to affect other grids on the same page.

Another option you can consider is using regular asp:CheckBox elements and a RadFormDecorator, instead of RadCheckBox to see if this will be closer to what you want to achieve.

Regards,
Marin Bratanov
Progress Telerik

[Shawn]

Thank you!  This worked perfectly!