1. Home
  2. Forum
  3. ASP.NET MVC
  4. Have several checkbox controls on the form and need one to be bolded

Have several checkbox controls on the form and need one to be bolded

Good Day:

I have a form with several Syncfusion checkbox controls.  The text was coming out wrong and hard to read, so I overrode the control defaults using css and updating the "e-text" class.  This worked fine and I now see easily readable text.

The problem comes when I need to bold one of the options in a list of checkbox items (so all but one are regular emphasis, and one is bolded).  The .CssClass method isn't working for the control.

Here is a code snippet with the checkbox (the last one is the issue that won't bold):
                        @Html.EJ().CheckBox("chkProgramMontessori").Text("Montessori").Enabled(!disableControls).Checked((Model.ProgramMontessori == null || Model.ProgramMontessori.ToString() == "0" || Model.ProgramMontessori.ToString().ToLower() == "false") ? false : true).CssClass("form-control").CssClass("customdisable")
                        @Html.EJ().CheckBox("chkProgramTransfer").Text("Transfer").Enabled(!disableControls).Checked((Model.ProgramTransfer == null || Model.ProgramTransfer.ToString() == "0" || Model.ProgramTransfer.ToString().ToLower() == "false") ? false : true).CssClass("form-control").CssClass("customdisable")
                        @Html.EJ().CheckBox("chkProgramResourceSupport").Text("Resource Support").Enabled(!disableControls).Checked((Model.ProgramResourceSupport == null || Model.ProgramResourceSupport.ToString() == "0" || Model.ProgramResourceSupport.ToString().ToLower() == "false") ? false : true).CssClass("form-control").CssClass("customdisable").CssClass("text-danger").CssClass("boldItem")
 
The CSS for the default is:
.e-text {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
}

and the CSS for the custom boldItem class is:
.boldItem {
    font-weight: 900;
}

The default font-weight:400 is working, but the 900 isn't.  I am able to use the .CssClass to update other look-and-feel items, so am confused why the font-weight is not working.

Any suggestions?

Thanks you!

Jonathan

1 Reply
PK Prem Kumar Madhan Raj Syncfusion Team November 21, 2017 01:05 PM UTC

Hi Jonathan, 
 
 
Thanks for contacting Syncfusion Support. 
 
We have looked into your query “CssClass API is not working for the control” and your shared code example to make the text of checkbox to be Bold. In your code sample, we found that e-text class was used to set the font-weight for the text of the checkbox and boldItem class was used to override the font-weight of the text content. To override a CSS property with CssClass, the class defined the property should be overridden along with the CssClass as shown below.  
 
  
<style> 
    .e-text { 
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 
        font-size: 1.5rem; 
        font-weight: 400; 
    } 
 
    .boldItem .e-text { 
        font-weight: 900; 
    } 
 
</style> 
 
 
To know about CssClass API, please refer our API documentation in the below link. 
 
 
For your convenience, we have created sample as per your requirement in the below link. Please check it. 
 
 
 
Regards, 
 
Prem Kumar. M

Loader.
Up arrow icon