Refresh overflow

[Domantas]

Hello,

So I missed toolbar refreshOverflow() method that, as i assume, got hidden. It helped me to refresh the overflow when I needed to. For some reason my toolbar doesn't apply arrows by default when elements doesn't fit in space ( it might be cause i'm using multiple ng-templates or something ). The only method that corrects overflow for me is refresh(), but when I fire it, my toolbar gets messed up, it drops id's and doesn't act as it supposed to. So my question would be, can I somehow manually call to look for toolbar overflow, cause it won't do it by default for me.

[Buvana Sathasivam]

Hi Domantas, 

Thanks for using Syncfusion Products. 

We suspect that the cause of the issue is, CSS not properly loaded at initial rendering.  If you are referred CSS CDN link in your project, you can face issue on right and left icon at initial rendering.  This issue because of component is rendered before referred on CSS file.  So, we suggest to import CSS files for your component in the following way. 

Styles.css 

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

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

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

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

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

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

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

      

Please find the below stackblitz link for your reference. 

https://stackblitz.com/edit/angular-uz9y7c?file=src%2Fapp%2Fapp.component.html  

If the above solution does not solve your problem, could you please reproduce your issue with above stackblitz sample/send video with your issue/send your code.  So, that we will check your issue and update a appropriate solution at earliest. 

Regards, 

Buvana S 

 

[Domantas]

Hello,

Thank you for your answer, but this was a different problem and I managed to find the answer. In case someone comes here for the same problem I'll tell where was the issue in my case.

So, I did render my toolbar as supposed to and pushed items into it. And to avoid flashing the toolbar as items gets pushed or disabled, on initial load I set toolbar native element visibility to hidden and later on I set it to visible and this caused the collapsing issue cause when you set it to hidden it doesn't get elements width/height and everything gets messed up when you resize window. 

[Deepa Loganathan]

Hi Domantas,  

Sorry for the inconvenience. 

We have tried to reproduce the reported issue by disabling and enabling the visibility property and see that the arrow elements are properly added upon call to refreshOverflow() method. 

Currently we didn’t expose this method in our documentation section, will update this details soon in UG section. 

Please find the sample to validate the reported issue. 

https://stackblitz.com/edit/angular-ptgwtw?file=src/app/app.component.ts 

If the issue still persists, please share the below details. 

1.       The view page of the sample if possible 

2.       Screenshot or video of the reported issue 

Regards,  

Deepa L.