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

Style CheckBox to look like standard Checkbox

2 Answers 187 Views
Checkbox
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Veteran
Jonathan asked on 11 Jun 2020, 03:24 PM

Hi

How do I style the CheckBox to appear like the standard Check Box? I want it to be large, width= 50

 

    <td><InputCheckbox id="chkpopup" class="form-control" style="width: 50px;" @bind-Value="Popup" /> </td>

                <TelerikCheckBox Id="chkpopup" 
                                 @bind-Value="@Popup"
                                 OnChange="@PopUpCheckChanged">
                </TelerikCheckBox>

 

See attachment.. I want the small Telerik CheckBox to appear large and blue.

 

thx

 

2 Answers, 1 is accepted

Sort by
0
Accepted
Svetoslav Dimitrov
Telerik team
answered on 12 Jun 2020, 08:07 AM

Hello Jonathan,

I can see you would like our CheckBox to have Bootstrap styling on it. I would suggest you use our Bootstrap theme. In order to do so you can go to the _Host.cshtml file and swap these two lines:

Default theme (to be swapped):

    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />

Bootstrap theme (to swap with):

    <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" />

 

If you go with the Bootstrap theme you would only need the first part of the CSS rules in the code snippet below, however - if you choose to stick to the default, you would need them both. Also, the Class parameter of the CheckBox should be changed according to the selected theme, I have left a comment in the code snippet for that.

     

    <style>
        .big-checkbox,
        .big-checkbox::before {
            font-size: 36px;
            text-align: center;
            height: 40px;
            width: 40px;
        }
    
        /* The CSS rules below apply if you would like to stick to the default theme
            and still get the blue backgroud color. If you use our Bootstrap theme they are redundant and can be removed */
    
        .big-checkbox-selected,
        .big-checkbox-selected::before {
            font-size: 36px;
            text-align: center;
            height: 40px;
            width: 40px;
            background-color: blue;
            border-color: blue;
        }
    </style>
    
    
    @* If you are using the Bootstrap theme your Class parameter would be: Class="big-checkbox" *@
    
    <TelerikCheckBox Id="chkpopup"
                     @bind-Value="@Popup"
                     OnChange="@PopUpCheckChanged"
                     Class="@( Popup == true ? "big-checkbox-selected": "big-checkbox")">
    </TelerikCheckBox>
    
    
    @code {
        public bool Popup { get; set; }
    
        void PopUpCheckChanged(object value)
        {
            //Your custom logic here
        }
    }

     

    Regards,


    Svetoslav Dimitrov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
    0
    Jonathan
    Top achievements
    Rank 1
    Veteran
    answered on 12 Jun 2020, 01:27 PM
    thx again!!!!!!!!!  Big help
    Tags
    Checkbox
    Asked by
    Jonathan
    Top achievements
    Rank 1
    Veteran
    Answers by
    Svetoslav Dimitrov
    Telerik team
    Jonathan
    Top achievements
    Rank 1
    Veteran
    Share this question
    or