I'm experiencing a frustrating layout issue with Radzen components in my .NET 9 application.
Current behavior:
- When using
RadzenLayout in my MainLayout.razor file, there's unwanted white space appearing above the header
- When I remove the
RadzenLayout component, the top space disappears but then extra white space appears at the bottom
What I've tried:
- Adding
rz-scrollbars class to the body element
- Setting explicit height (100%) on html, body, and container elements
- Removing all custom CSS classes that might conflict with Radzen
- Setting grid-template areas and columns to match the official Radzen site
- Setting margin and padding to 0 on various container elements
I've spent considerable time troubleshooting this issue without success. As a Professional Plan subscriber, I'd appreciate guidance on how to properly implement the RadzenLayout component without these spacing issues.
Environment:
- .NET 9
- Latest Radzen Blazor Components
- Blazor Web App project
Could you please provide a definitive solution or a minimal working example that demonstrates the correct implementation of RadzenLayout without unwanted spacing?
UPDATE: I've solved the issue by creating a custom layout instead of using RadzenLayout.
After spending considerable time troubleshooting the white space issues with RadzenLayout, I decided to create my own custom layout using CSS Grid. This approach gave me complete control over the spacing and positioning.
Key components of my solution:
- Created a custom layout structure with grid-template-areas
- Used position: absolute with top/left/right/bottom: 0 to ensure full viewport coverage
- Set explicit height: 100vh on the main container
- Maintained the ability to use Radzen components within my custom layout
This approach eliminated all unwanted white space while still allowing me to leverage Radzen's component library. If anyone else encounters similar issues, I recommend this approach as it provides more direct control over the layout structure.
Thanks for the great component library - I'm still using all the Radzen UI components, just with my own layout container.
Hey @karacif,
We cannot tell what's off with the RadzenLayout on the screenshot. It might be some custom or third-party styles interfering. We'd appreciate it if you can send us (info@radzen.com) a project reproducing the issue.
Creating a new app in Radzen Blazor Studio (File -> New Application...) will produce an application with properly implemented RadzenLayout.
