How to Make EJ2 Switch Button Wider Using Custom CSS?

By default, the EJ2 Switch component has a fixed width. If you need to make the Switch wider for better UI alignment or readability, you can achieve this by applying a custom CSS class using the cssClass property of the Switch component.

Step 1: Initialize the EJ2 Switch Component

Create an instance of the EJ2 Switch component and assign a custom CSS class using the cssClass property.

var switchObj = new ejs.buttons.Switch({
  checked: true, // Sets the switch to ON by default
  cssClass: 'e-switch-wider' // Custom CSS class for styling
});
switchObj.appendTo('#checked'); // Attach the switch to the target element

• checked: true ensures the switch is ON initially.
• cssClass: ‘e-switch-wider’ adds a custom class to the switch wrapper, allowing you to override default styles.

Step 2: Define Custom CSS for Width

Create a CSS rule targeting the custom class applied to the Switch wrapper. This will override the default width.

.e-switch-wrapper.e-switch-wider, .e-css.e-switch-wrapper.e-switch-wider {
  width: 100px; /* Adjust width as needed */
}

• .e-switch-wrapper.e-switch-wider targets the wrapper when the custom class is applied.
• .e-css.e-switch-wrapper.e-switch-wider ensures compatibility with EJ2’s built-in CSS class.
• You can also add additional styles like height, padding, or margin for complete customization.

Step 3: Apply Additional Styling (Optional)

If you want to customize more than just width, you can add properties like:

.e-switch-wrapper.e-switch-wider {
  width: 120px;
  height: 40px;
  padding: 5px;
}

Step 4: Test the Implementation

After applying the custom CSS and initializing the component, verify that the Switch button appears wider and fits your design requirements.

Demo Sample

You can view and edit the complete working example here:
https://stackblitz.com/edit/pdzcbgcf-4us4bdae?file=index.js,index.html

Summary

• Use the cssClass property to apply a custom class to the EJ2 Switch.
• Override default styles in CSS using the custom class.
• Adjust width and other properties as needed for your UI.

Preview

Conclusion

We hope this article helped you learn how to make EJ2 Switch Button Wider Using Custom CSS.

You can refer to our JavaScript Switch Button feature tour page to learn about its other groundbreaking feature representations and documentation, as well as how to quickly get started with configuration specifications. You can also explore our Javascript Gantt Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Tract, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)