Toolbar Styling

Question

Hi there,I have an issue with the styling of the toolbar in the vue grid. The base page is bootstrap, but I am trying to use the material theme for styling the table.  The table renders and looks great.  Here's how the toolbar renders at the top of the I have the following css references in the .vue file.  If I change from material.css to boostrap.css, I get the same look with the toolbar.  I would really like to have the excel export and search controls on the same line, on opposite sides - i.e. the excel export aligned left and the search box aligned right.Am I missing something?Thank you!@import '../../../../node_modules/@syncfusion/ej2-base/styles/material.css'; @import '../../../../node_modules/@syncfusion/ej2-vue-grids/styles/material.css';

Thiyagu Subramani · Answer

Hi Jon, 

Thanks for contacting Syncfusion. 

We suspect that the reported issue will occur when we missed to define toolbar style references. To overcome this issue, we suggest you to add below code in style.css 

Please refer the below code. 





@import '../../../../node_modules/@syncfusion/ej2-base/styles/material.css';  
@import '../../../../node_modules/@syncfusion/ej2-vue-grids/styles/material.css';  
@import '../../../../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css';  // for ExcelExport  toolbar 
@import '../../../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css';  // for Search input 

Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S