Enable ripple for Switch label

28 Feb 20221 minute to read

By default, label with ripple effect is not available in Switch. You can achieve this using rippleMouseHandler method. The following example illustrates how to enable ripple effect for labels in Switch component.

<div id='container'>
    <table class='size'>
        <tr>
            <td class='lSize'><label for='switch1'>USB Tethering</label></td>
            <td>
                @Html.EJS().Switch("switch1").Render()
            </td>
        </tr>
    </table>
</div>


<style>

.e-switch-wrapper {
  margin-top: 18px;
}

.size tr td {
  padding: 10px;
}

.size .lSize {
  padding-top: 24px;  
  font-family: "Roboto", "Segoe UI", "GeezaPro", "DejaVu Serif", "sans-serif";
  font-size: 13px;
}

.size .lSize label{
  cursor: pointer;
  user-select: none;
}

</style>
public ActionResult Default()
    {
            return View();
    }