starred/radzen-blazor
1
0
Fork 0
mirror of https://github.com/radzenhq/radzen-blazor.git synced 2026-02-04 05:35:44 +00:00
Code Issues 1.3k Packages Projects Releases 22 Wiki Activity

A RadzenAlert flows outside the bound of a parent RadzenStack. #890

New Issue
Closed
opened 2026-01-29 17:45:51 +00:00 by claunia · 2 comments
claunia commented 2026-01-29 17:45:51 +00:00
Owner
Copy Link

Originally created by @Mertsch on GitHub (Jun 15, 2023).

Describe the bug
A RadzenAlert flows outside the bound of a parent RadzenStack. This is triggered by .rz-alert width: 100%

To Reproduce
2023-06-15 18-40-33 OUTLOOK

Then I disable width
2023-06-15 18-41-35 msedgewebview2

and it looks good
2023-06-15 18-41-21 OUTLOOK

Expected behavior
A RadzenAlert should always stay inside the bounds of the parent.

Desktop (please complete the following information):

  • OS: Win
  • Browser: Edge inside Outlook
  • Version: 113
        <RadzenStack Orientation="Orientation.Vertical">

            [...]

            <RadzenButton class="rz-mt-2 rz-mt-sm-4" Style="background-color: #600d02" Click="createLogbookEntryClick" Text="@buttonText"
                          Disabled="@(SelectedCompany is null || SelectedInitiation is null)">
            </RadzenButton>
            
            <RadzenAlert AlertStyle="AlertStyle.Warning" AllowClose="true" Visible="@(CreateState is AnbahnungSubState.Error)">
                <span>@Localizer.GetString("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book")</span>
            </RadzenAlert>

        </RadzenStack>
Originally created by @Mertsch on GitHub (Jun 15, 2023). **Describe the bug** A `RadzenAlert` flows outside the bound of a parent `RadzenStack`. This is triggered by `.rz-alert` `width: 100%` **To Reproduce** ![2023-06-15 18-40-33 OUTLOOK](https://github.com/radzenhq/radzen-blazor/assets/9402861/8304f5ce-3c15-43b6-8687-662a35748a27) Then I disable `width` ![2023-06-15 18-41-35 msedgewebview2](https://github.com/radzenhq/radzen-blazor/assets/9402861/cd4b22cc-6292-461f-b524-2255849fc41c) and it looks good ![2023-06-15 18-41-21 OUTLOOK](https://github.com/radzenhq/radzen-blazor/assets/9402861/aa249079-3099-4cf6-8f27-ad191a4c4621) **Expected behavior** A `RadzenAlert` should always stay inside the bounds of the parent. **Desktop (please complete the following information):** - OS: Win - Browser: Edge inside Outlook - Version: 113 ``` <RadzenStack Orientation="Orientation.Vertical"> [...] <RadzenButton class="rz-mt-2 rz-mt-sm-4" Style="background-color: #600d02" Click="createLogbookEntryClick" Text="@buttonText" Disabled="@(SelectedCompany is null || SelectedInitiation is null)"> </RadzenButton> <RadzenAlert AlertStyle="AlertStyle.Warning" AllowClose="true" Visible="@(CreateState is AnbahnungSubState.Error)"> <span>@Localizer.GetString("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book")</span> </RadzenAlert> </RadzenStack> ```
claunia commented 2026-01-29 17:45:52 +00:00
Author
Owner
Copy Link

@yordanov commented on GitHub (Jun 26, 2023):

@Mertsch, couldn't reproduce this behaviour. Can you confirm that such behaviour is reproducible in the online demos? You can edit the example via Edit Source:
image
Also check if there are any additional styles in you app that might be interfering with RadzenAlert styles.

@yordanov commented on GitHub (Jun 26, 2023): @Mertsch, couldn't reproduce this behaviour. Can you confirm that such behaviour is reproducible in the [online demos](https://blazor.radzen.com/alert)? You can edit the example via **Edit Source**: <img width="952" alt="image" src="https://github.com/radzenhq/radzen-blazor/assets/1118895/92dd0e57-4f41-4dd5-b28e-1b85d86210eb"> Also check if there are any additional styles in you app that might be interfering with RadzenAlert styles.
claunia commented 2026-01-29 17:45:53 +00:00
Author
Owner
Copy Link

@Mertsch commented on GitHub (Aug 7, 2023):

Hey @akorchev or @yordanov, sorry for not getting back to you earlier, I was not able to reproduce exactly the issue as I have inside of Outlooks Edge, but I did a bit of analysis where this is actually coming form and I noticed the following:

There seems to be a problem with the calculation of width in combination with padding. For some reason the padding is taken into account when calculating the final width. If I use the same margin on the inner element, it works just fine.

This can be observed in the demo when you choose some extreme margins.

2023-08-07 10-50-08 msedge
With this unreasonable padding the content is shrunk down to 0px, which is not true (we still see the content) and the alert leaves the bounds of the parent.

2023-08-07 10-44-37 msedge
With a large margin, the parent alert element stays in bounds, the content is still the correct flex size, but due to the margin it visually leaves the parent.

Is switching from parent-padding to child-margin an option?

@Mertsch commented on GitHub (Aug 7, 2023): Hey @akorchev or @yordanov, sorry for not getting back to you earlier, I was not able to reproduce exactly the issue as I have inside of Outlooks Edge, but I did a bit of analysis where this is actually coming form and I noticed the following: There seems to be a problem with the calculation of width in combination with padding. For some reason the padding is taken into account when calculating the final width. If I use the same margin on the inner element, it works just fine. This can be observed in the demo when you choose some extreme margins. ![2023-08-07 10-50-08 msedge](https://github.com/radzenhq/radzen-blazor/assets/9402861/d3a2618c-eadf-46c7-a329-cecdaa0c5f82) With this unreasonable padding the content is shrunk down to 0px, which is not true (we still see the content) and **the alert leaves the bounds of the parent**. ![2023-08-07 10-44-37 msedge](https://github.com/radzenhq/radzen-blazor/assets/9402861/2ed41780-4441-4bae-b45d-f222f3c0f5f5) With a large margin, the **parent alert element stays in bounds**, the content is still the correct flex size, but due to the margin it visually leaves the parent. Is switching from parent-padding to child-margin an option?
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
enhancement
good first issue
pull-request
Mirrored from GitHub Pull Request
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
claunia
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/radzen-blazor#890
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?