Toolbar: Overflow area with many items grows larger than the Page and is not scrollable
Control: RadToolbar OverflowMode: DropDown
If there are too many OverflowItems which doesn't fit on the screen/available space, then the List of OverflowItems should scroll. Current behaviour: Items are truncated / invisible
Yes correct the max height fix the behavior on WinUI. On Android I am afraid I cannot suggest another approach. The behavior is related to the popup control we use for the drop-down mode. I escalated the case to the team, still cannot share a time frame when a fix will be provided.
the initially reported behavior is still persistent. Without MaximumHeightRequest the overflow doesn't scroll on my side (on Windows).
On Android the overflow scrolls without MaximumHeightRequest, but using MaximumHeightRequest (to cover Windows) leads to the behavior described this morning. (I've commented out the last six items, so only one will go to overflow in landscape)
I hope you're now able to see what i mean.
thx
Nico
ADMIN
Didi
Posted on:22 Jan 2025 11:35
Hello Nico,
I have tested the initially reported behavior, and I am afraid, I cannot reproduce the issue with Telerik MAUI 9.0.0 version. Project is attached. I have used the suggested workaround, also no issues, I can scroll through the items in the drop down mode. I have tested on all 4 platforms.
Could you please download and test the attached project on your side? Let me know the results. Also modify it to match the exact setup in which the behavior happens.
Any news on this? it's been a while... It is now the case that when MaximumHeightRequest is set - on Android the popup always has the height specified under MaximumHeightRequest. Which is pretty inconvenient. I don't know if this is due to changes in Telerik or a newer MAUI version - but I definitely need a fix or a new workaround.
Setting MaximumHeightRequest to 500
vs not setting it:
ADMIN
Ivan
Posted on:12 Jul 2023 11:38
Hello Nico,
Thank you for the provided information. I have reproduced the problem on our side. This seems like a bug with our RadPopup component, which the RadToolbar uses internally. Apparently, the RadPopup does not take into account the available space on the Page, so it grows too large and certain ToolbarItems get clipped out. I have logged a bug report for this on your behalf. You can track the status of the bug from the following link: Overflow area with many items grows larger than the Page and is not scrollable. As a temporary workaround, you can limit the maximum height of the overflow area:
This is not ideal, as the hard-coded maximum height can still be larger than the window itself, unless you specify a really small value for it. At least, it fixes the usability problem when certain ToolbarItems go offscreen and are inaccessible. Please, excuse us for the temporary inconvenience. I have increased your Telerik points as a token of our gratitude.
Thank you very much for the screenshot and additional clarification, that is indeed a different situation: the Overflow's DropDown is not scrolling.
I will change this from 'Needs More Info' to 'Under Review', as I believe we should be able to replicate the behavior from the screenshot alone. If they cannot, someone from the team will follow up to ask for the concrete implementation from you.
Thank you for your patience and understanding while we review this further!
Regards,
Lance | Manager Technical Support
Progress Telerik
Hello Lance, we must have misunderstood each other here, or I expressed myself incorrectly. The toolbar itself wraps as expected. The problem are the elements in the overflow, there are more here than can fit
ADMIN
Lance | Senior Manager Technical Support
Posted on:10 Jul 2023 19:14
Hello Nico,
Can you please share the complete XAML (or UI) code used for this implementation? The reason I ask is because what you're seeing may be expected behavior depending on what visual parent is being used.
There are different parent elements that may not provide the edge boundary needed for the overflow to take effect. For example, if you put into a VerticalStackLayout, the horizontal measurement is infinity and you will never get an overflow.
Here's a mockup of placing the Toolbar (yellow) in a VerticalStackLayout (purple), Window (red):
It's not uncommon for someone to end up in this situation because sometime the root element of the page is a VerticalStackLayout, but it should be a Grid. Then you can put a VerticalStackLayout inside the Grid.
If you do happen to have it in a parent that measure width to infinity (VerticalStackLayout, ScrollView, etc), then this expected behavior because there is no edge to overflow. It essentially goes off to the side, outside the bounds of the visible Window area, into infinity.
Please try placing it in a container that does provide a hard stop, for example a Grid. Here's a mockup representation of the concept:
If you absolutely must keep this in an infinite width parent, then you could programmatically set the Width of the Toolbar to the same width as the parent ContentPage. This can be done using the ContentPage.SizeChanged event with a minimum threshold for change.
Let me know how this goes after you ensure there is a definitive width for the Toolbar to trigger the overflow and not run off the screen.
Regards,
Lance | Manager Technical Support
Progress Telerik