Feature Request: Expand Responsive design to Dialog Contents #1847

New Issue

claunia · 2026-01-29T17:59:20Z

claunia commented

2026-01-29 17:59:20 +00:00

Originally created by @Anspitzen on GitHub (Aug 28, 2025).

Is your feature request related to a problem? Please describe.
When Having a nice responsive design for a component this does only work for full viewport, which a Dialog seldom uses fully. So Responsive Breakpoints are handled as if the Component would be rendered by a FAR wider window

Describe the solution you'd like
The Breakpoints used (SizeSM / SizeLG / OrderMD ...) are in relation to the DialogContent Width, not the full Browser Viewport

Describe alternatives you've considered

Making the Dialog Width = "100vw"
Adjusting displayed Component(s) in the Dialog to be generally for smaller display

Originally created by @Anspitzen on GitHub (Aug 28, 2025). **Is your feature request related to a problem? Please describe.** When Having a nice responsive design for a component this does only work for full viewport, which a Dialog seldom uses fully. So Responsive Breakpoints are handled as if the Component would be rendered by a FAR wider window **Describe the solution you'd like** The Breakpoints used (SizeSM / SizeLG / OrderMD ...) are in relation to the DialogContent Width, not the full Browser Viewport **Describe alternatives you've considered** - Making the Dialog Width = "100vw" - Adjusting displayed Component(s) in the Dialog to be generally for smaller display

claunia commented

2026-01-29 17:59:21 +00:00

@yordanov commented on GitHub (Aug 28, 2025):

Hi @Anspitzen,

I guess you’re suggesting using container queries instead of media queries for responsive layouts in RadzenDialog? I’m a bit hesitant since the same properties could behave differently in different scenarios — maybe it would make sense to define new ones? Could you share specific scenarios or components where you think this approach would be most useful?

@yordanov commented on GitHub (Aug 28, 2025): Hi @Anspitzen, I guess you’re suggesting using [container queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries) instead of media queries for responsive layouts in RadzenDialog? I’m a bit hesitant since the same properties could behave differently in different scenarios — maybe it would make sense to define new ones? Could you share specific scenarios or components where you think this approach would be most useful?

claunia commented

2026-01-29 17:59:21 +00:00

@Anspitzen commented on GitHub (Aug 28, 2025):

Lets say I have a Component loading some Tags with their description from a Database for selection as nice bubbles
On a wide monitor I would like to have the bubbles in three Columns, on a slim screen (mobile, or vertical Tablet, a Vertical Monitor etc) I would like to habe them in only one column.
So I take something like

<RadzenRow>
    @foreach (var data in List)
    {
        <RadzenColumn Size="12" SizeSM="4">
            <DataDisplayComponentOrStraightWriteup Data="data" />
        </RadzenColumn>
    }
</RadzenRow>
@code{
    List<mydata> List = new List<mydata>();
    protected override async Task OnInitializedAsync(){
        List = await MyDatabaseService.GetDataFromDatabase();
    }
}

For any @page("") Component works perfectly, but if I now open that Component in a Dialog (lets say Side Dialog) it still tries to render the full three columns, even if the dialog was smaller than the slim screen (here the SM = <768px).

So yes, something like container queries. Maybe by setting a Parameter on the component "ContainerResponsive" to mark a Component to take its Size/Order etc. Breakpoints from the DialogContainer and not like usual from the Viewport? For any existing it would be behaving like normal, if you set the parameter it is responsive to the parent div.

@Anspitzen commented on GitHub (Aug 28, 2025): Lets say I have a Component loading some Tags with their description from a Database for selection as nice bubbles On a wide monitor I would like to have the bubbles in three Columns, on a slim screen (mobile, or vertical Tablet, a Vertical Monitor etc) I would like to habe them in only one column. So I take something like ``` <RadzenRow> @foreach (var data in List) { <RadzenColumn Size="12" SizeSM="4"> <DataDisplayComponentOrStraightWriteup Data="data" /> </RadzenColumn> } </RadzenRow> @code{ List<mydata> List = new List<mydata>(); protected override async Task OnInitializedAsync(){ List = await MyDatabaseService.GetDataFromDatabase(); } } ``` For any @page("") Component works perfectly, but if I now open that Component in a Dialog (lets say Side Dialog) it still tries to render the full three columns, even if the dialog was smaller than the slim screen (here the SM = <768px). So yes, something like container queries. Maybe by setting a Parameter on the component "ContainerResponsive" to mark a Component to take its Size/Order etc. Breakpoints from the DialogContainer and not like usual from the Viewport? For any existing it would be behaving like normal, if you set the parameter it is responsive to the parent div.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#1847