When embedding DashboardLayout in flex container, primary rendering fails (window resize needed)

[Peter Esser]

Hi there,

We are exploring all your components and love them. In combination with a Tailwind CSS based layout, we rely a lot on the Flex definition of CSS. Therefore, we also use a flex based container in which we load the Dashboard Layout. (flex: 1 1 0%; flex-direction: column;)

After init, the elements are scrambled on top of each other. I think it has something to do with the nature of "flex" and the size determination of the DashboardLayout library, which is not available at the time of calculation. The library is capable though of using the correct sizes when doing a window resize action, so perhaps it is a timing issue. 

Hope you have some ideas to make this combination work!

Peter

Attachment: screenshots_12b72caf.zip

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Peter, 

 

Greetings from Syncfusion support. 

 

We have validated your reported problem. Unfortunately, we were unable to replicate your reported problem at our end as Dashboard Layout works properly within flex-container element without any issues. 

 

We have attached our validation sample for your reference. 

 

https://codesandbox.io/s/dashboardlayoutflexcontainer-forked-ch00w  

 

Please, check the above sample and let us know whether it helped you resolve your reported problem or else please provide us more details to replicate your reported issue at our end.  

 

If possible, please share us a issue replicated sample. This information would help us to find the cause of your reported problem and to provide you the prompt solution. 

 

Please, check out the following links to know more about Dashboard Layout component in Vue platform. 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/dashboard-layout/  

 

API Reference: https://ej2.syncfusion.com/vue/documentation/api/dashboard-layout/ 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S.