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

[xu zhi bin]

<template>

    <ejs-querybuilder  width="70%">
      <e-columns>
        <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' />
      </e-columns>
    </ejs-querybuilder>

</template>

<script>

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

Vue.use(QueryBuilderPlugin);
export default {
  name: "test2",
  data(){
    return {
      values: ['Mr.', 'Mrs.'],
    }
  },
  mounted() {

  },
  methods:{

  },

}
</script>

<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";
</style>

[YuvanShankar Arunagiri]

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

[xu zhi bin]

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

[YuvanShankar Arunagiri]

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";

………………………………….

    </style>

[xu zhi bin]

Look at my demo. Not displayed by default.

Attachment: testsyncfusion_4a4808de.zip

[xu zhi bin]

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

[YuvanShankar Arunagiri]

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.  

  

Please let us know if you have any concerns. 

[xu zhi bin]

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

[Theveshwar Jayakumar]

Hi xu zhi bin,

Since we are generating dynamic elements for all Syncfusion components, the scoped attribute will not be supported for our components.

Please get back to us if you have any concerns