Syncfusion and Quasar

[Christian DAquino]

Hi,

Is there a conflict between Syncfusion and Quasar framework? It looks like the grid's CSS is not rendering correctly on Quasar, as per the attached screenshots.

Attachment: Screenshots_52c5f42a.zip

[Amos]

It works great, just put the following in the style section

<style>

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

@import "../../node_modules/@syncfusion/ej2-buttons/styles/bootstrap4.css";

@import "../../node_modules/@syncfusion/ej2-calendars/styles/bootstrap4.css";

@import "../../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap4.css";

@import "../../node_modules/@syncfusion/ej2-inputs/styles/bootstrap4.css";

@import "../../node_modules/@syncfusion/ej2-navigations/styles/bootstrap4.css";

@import "../../node_modules/@syncfusion/ej2-popups/styles/bootstrap4.css";

@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap4.css";

@import "../../node_modules/@syncfusion/ej2-vue-grids/styles/bootstrap4.css";

The only "conflict" I encountered so far is the date format where quasar expects DD-MM-YYYY while syncfusion expects dd-MM-YYYY

I know syncfusion will add support for that soon.

[Jim OQuinn]

Looks familiar!  Amos is correct, appears to be missing CSS for the additional components.  Typically you can find the component list, which will then give you enough of a hint to pull in the CSS files, on the components documentation page (not the demo page).   If I recall, you can find a list of all the components in the Dependencies section

edit:  correction, appears there is now a CSS Reference section in the Documentation that will cover all the components.  Have not tested this, but I suppose you can copy and paste that into the <style> section in your .vue file. 

For example, the In-Line editor component: 

https://ej2.syncfusion.com/vue/documentation/inplace-editor/getting-started/ 

Now has both a Dependencies section and CSS Reference section.  This is great!

BTW, I also use Quasar with Syncfusion and Ive yet to encounter any issues other than those of my own making.  I think those two packages together make for one of the best all around dev toolkits in existence. 

[Rajapandi Ravi]

Hi , 

You can import components CSS as given below in style section of the App.vue file. Please refer the below code snippet and documentation for more information. 

 

<style> 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';   

@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-popups/styles/material.css'; 

@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css'; 

@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css"; 

</style> 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/getting-started/#adding-css-reference 

Regards, 

Rajapandi R