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:

<telerik:RadToolbar>
    <telerik:RadToolbar.OverflowMenuButtonStyle>
        <Style TargetType="telerik:OverflowMenuButtonToolbarItemView">
            <Setter Property="DropDownContentStyle">
                <Style TargetType="telerik:DropDownButtonToolbarItemViewContent">
                    <Setter Property="MaximumHeightRequest" Value="200" />
                </Style>
            </Setter>
        </Style>
    </telerik:RadToolbar.OverflowMenuButtonStyle>
</telerik:RadToolbar>

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.

Regards,
Ivan
Progress Telerik

Hello Nico,

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 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