Guidance for Syncfusion and CSS Grid layouts.

Question

Is there anything I need to know about using Syncfusion Blazor controls with CSS Grid layouts (i.e. display=grid)?

There are no examples I can find where the controls are used with CSS Grid layouts, and things do not seem to behave the way I expect. I selected AppBar as a control here, but it is an issue in several cases. I can get more specific, but I wanted to ask the general question first.

Thank you in advance,

-Jp

Swathi Ravi · Answer

Hi John,We suggest you that to use Dashboard
Layout to achieve your requirement. Refer to the below shared UG
documentation and demos to know more about dashboard layout.UG: https://blazor.syncfusion.com/documentation/dashboard-layout/getting-startedDemo: https://blazor.syncfusion.com/demos/dashboard-layout/overview?theme=fluentRegards,Swathi Ravi

John Phillips · Answer

I sensed there is some CSS wizardry in the controls that overrides some CSS Grid constraints.

For the AppBar, even on a blank page with no CSS Grid, I copied and pasted the Dense example (below), and the AppBar wraps the button. Can you help me understand why?

Image_3860_1692030906878

Swathi Ravi · Answer

John,We have checked your reported issue in the Dense mode
AppBar at our end. But we are not able to replicate your reported issue. Please
check our shared sample and share below details to proceed further. It would be
more helpful to us.
 Entire
     AppBar related code snippets with the sample end styles customizations or
 Replicate
     the issue in our shared sample or
 Issue
     replicating sample.
Attachment: blazorappbar_4740560d.zip

John Phillips · Answer

There is something fishy here. I created a Blazor server app via the SyncFusion extension in VS2022, and of course it worked okay. With no other changes, I went to the Blazor theme studio to create a theme with a different Bootstrap5 dark primary color (the only change), and simply changing the reference to the new bootstrap.css file broke the newly created app. This inconsistent behavior is very confusing.

Attached is the settings file from Blazor theme studio.

Attachment: settings_c8fc6e5a.zip

Satheesh Kumar Balasubramanian · Answer

Hi John,We have generated bootstrap5-dark theme from blazor theme studio based on the following steps in the documentation. But, we were unable to reproduce the reported issue at our end. We have attached the sample and custom styles downloaded from blazor theme studio. Please check our shared sample and share below details to proceed further. It would be more helpful to us.https://blazor.syncfusion.com/documentation/appearance/theme-studio#customizing-theme-color-from-theme-studioEntire custom styles downloaded from blazor theme studio orReplicate the issue in our shared sample orIssue replicating sample.Regards,Satheesh Kumar BAttachment: BlazorAppBar_644c95e9.zip