We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Is there a bug in the default style? Incorrect display.


<ejs-querybuilder width="70%">
<e-column field='EmployeeID' label='Employee ID' type='number' />
<e-column field='FirstName' label='First Name' type='string' />
<e-column field='TitleOfCourtesy' :values="values" label='Title Of Courtesy' type='boolean' />
<e-column field='Title' label='Title' type='string' />
<e-column field='HireDate' label='Hire Date' type='date' format='dd/MM/yyyy' />
<e-column field='Country' label='Country' type='string' />
<e-column field='City' label='City' type='string' />



import Vue from "vue";
import { QueryBuilderPlugin } from "@syncfusion/ej2-vue-querybuilder";

export default {
name: "test2",
return {
values: ['Mr.', 'Mrs.'],
mounted() {




<style scoped>
.e-query-builder {
margin: 0 auto;
@import "@syncfusion/ej2-base/styles/bootstrap5.css";
@import "@syncfusion/ej2-buttons/styles/bootstrap5.css";
@import "@syncfusion/ej2-splitbuttons/styles/bootstrap5.css";
@import "@syncfusion/ej2-dropdowns/styles/bootstrap5.css";
@import "@syncfusion/ej2-inputs/styles/bootstrap5.css";
@import "@syncfusion/ej2-lists/styles/bootstrap5.css";
@import "@syncfusion/ej2-popups/styles/bootstrap5.css";
@import "@syncfusion/ej2-calendars/styles/bootstrap5.css";
@import "@syncfusion/ej2-vue-querybuilder/styles/bootstrap5.css";

7 Replies

YA YuvanShankar Arunagiri Syncfusion Team November 2, 2022 03:43 AM

We were unable to replicate the issue at our end. We suspect that there is an issue in referring the Syncfusion script and style. You can refer to the below UG link and attached sample.

UG link:  https://ej2.syncfusion.com/vue/documentation/query-builder/getting-started/#adding-css-reference

If you are still facing issues, share a reproducible sample of the issue or replicate the issue in our sample.

Attachment: qb_c290307c.zip

XZ xu zhi bin replied to YuvanShankar Arunagiri November 16, 2022 11:00 PM

I know the difference. The style can't write this, but I don't understand why? Must this be removed?

YA YuvanShankar Arunagiri Syncfusion Team November 18, 2022 05:48 AM

Removing the scoped from style tag is not solution for your query. Please import/refer the path of the packages correctly and refer the below code snippet.

<style scoped>

    @import "../node_modules/@syncfusion/ej2-base/styles/bootstrap5.css";



XZ xu zhi bin November 21, 2022 09:50 PM

Look at my demo. Not displayed by default.

Attachment: testsyncfusion_4a4808de.zip

XZ xu zhi bin replied to YuvanShankar Arunagiri November 21, 2022 10:01 PM

Do styles have to be referenced globally? Can't it be referenced locally?

PS Pon Selva Jeganathan Syncfusion Team November 28, 2022 08:56 AM

Xu zhi bin, we need to inform you that scoped attributes are not working for dynamic components. So, you have to remove the scoped variable from the style tag and provide a proper import path for the style reference. Please find the below image for your reference.  


Description automatically generated


Please let us know if you have any concerns. 

XZ xu zhi bin replied to Pon Selva Jeganathan November 28, 2022 08:05 PM

Do all components not support scopes? Or is it partially unsupported? Is there a way to support scopes?

Live Chat Icon For mobile
Up arrow icon