Style and appearance in EJ2 JavaScript 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 all the JavaScript 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