<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>
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.
I know the difference. The style can't write this, but I don't understand why? Must this be removed?
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> |
Do styles have to be referenced globally? Can't it be referenced locally?
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.
Do all components not support scopes? Or is it partially unsupported? Is there a way to support scopes?
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