Style and appearance in EJ2 TypeScript Query builder control
27 Apr 20231 minute to read
To modify the QueryBuilder appearance, you need to override the default CSS of QueryBuilder component. Please find the list of CSS classes and its corresponding section in QueryBuilder component. Also, you have an option to create your own custom theme for the controls using our Theme Studio.
| CSS Class | Purpose of Class | |
|---|---|---|
| .e-group-header .e-btn | To customize the condition button in querybuilder | |
| .e-group-body .e-rule-container | To customize the querybuilder rule container | |
| .e-group-container .e-group-header .e-dropdown-btn | To customize the querybuilder Add group/condition button | |
| .e-query-builder .e-group-header .e-deletegroup | To customize the querybuilder Delete group button | |
| .e-query-builder .e-rule-field .e-rule-value-delete .e-rule-delete | To customize the querybuilder Delete condition button | |
| .e-query-builder .e-rule-list > ::after,.e-query-builder .e-rule-list > ::before | To customize the querybuilder group joining line | |
| .e-query-builder .e-rule-container.e-joined-rule | To customize the querybuilder condition joining line |