Customize width and height

17 Feb 20221 minute to read

The following section explains about how to customize the height and width of the RadioButton component.

CSHTML

<ul>
    <li>
        <ejs-radiobutton id="radio1" label="Option 1" name="default" checked="true"></ejs-radiobutton>
    </li>
    <li>
        <ejs-radiobutton id="radio2" label="Option 2" name="default"></ejs-radiobutton>
    </li>
</ul>
<style>
    .e-radio-wrapper {
        margin-top: 18px;
    }

    li {
        list-style: none;
    }

    .e-radio + label::before {
        height: 30px;
        width: 30px;
    }

    .e-radio + label::after {
        height: 20px;
        width: 20px;
    }

    .e-radio + label .e-ripple-container {
        height: 40px;
        left: -6px;
        top: -5px;
        width: 42px;
    }

    .e-radio + label .e-label {
        font-size: 15px;
        height: 32px;
        line-height: 30px;
        padding-left: 41px;
    }
</style>

Customheight.cs

public ActionResult CustomHeight()
{
    return View();
}