RadzenPanelMenu does not show on iPhone in Safari, Chrome or Firefox

Radzen.Blazor Components
1

Below is the code in de MainLayout.razor. The RadzenPanelMenu works fine on Windows in the Edge and Chrome browsers but on iPhone the menu does not show on Safari, Chrome or Firefox without the explicit style="width: 100%; min-width: 50px;". Expanding the menu does not work properly with the added style and does also not show without the style.

@inherits LayoutComponentBase
@inject CookieThemeService CookieThemeService
@inject ThemeService ThemeService
@inject RadzenTheme RadzenTheme
@inject IJSRuntime JSRuntime

<RadzenTooltip />
<RadzenChartTooltip />
<RadzenTheme Theme="@NewTheme" />

<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@ToggleDisplayStyle" />

            <a href="https://sessy.nl" target="_blank" Style="background-color: beige;">
                <RadzenImage Path="/Images/sessy.svg" Style="padding: 5px;"/>
            </a>

            <RadzenPanel>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                    <RadzenLabel Text="Theme:" Style="margin-right: 10px;"/>
                    <RadzenDropDown Style="width: 200px;"
                                    Name="ThemeDropDown"
                                    TValue="string"
                                    Value="@ThemeService.Theme"
                                    ValueChanged="@ChangeTheme"
                                    Data="@Themes.Free"
                                    TextProperty=@nameof(Theme.Text)
                                    ValueProperty=@nameof(Theme.Value) />
                </RadzenStack>
            </RadzenPanel>

            <Clock />
        </RadzenStack>
    </RadzenHeader>
    <RadzenPanelMenu DisplayStyle="@DisplayStyle" Style="width: 100%; min-width: 50px;">
        <RadzenPanelMenuItem Text="Batteries"
                             Click="@CollapseMenu"
                             Path="" Icon="battery_charging_full" />
        <RadzenPanelMenuItem Text="Charging hours"
                             Path="charginghours"
                             Click="@CollapseMenu"
                             Icon="grouped_bar_chart" />
        <RadzenPanelMenuItem Text="Sessy status history"
                             Path="sessystatushistory"
                             Click="@CollapseMenu"
                             Icon="error" />
        <RadzenPanelMenuItem Text="Sessy energy history"
                             Path="energyhistory"
                             Click="@CollapseMenu"
                             Icon="history" />
        <RadzenPanelMenuItem Text="Credits"
                             Path="credits"
                             Click="@CollapseMenu"
                             Icon="license" />

    </RadzenPanelMenu>
    <RadzenBody>
        <div class="rz-p-4">
            @Body
        </div>
    </RadzenBody>
    <RadzenFooter>

    </RadzenFooter>
</RadzenLayout>
2

Hi @PaulSinnema,

RadzenPanelMenu does show on iPhone just fine. Here is a recording from my iPhone browsing the online demo

5

2025-02-20_10-05-52
2025-02-20_10-05-521722×1262 128 KB

2025-02-20_10-06-23
2025-02-20_10-06-231722×1262 143 KB

IMG_20250220_095253.PNG
IMG_20250220_095253.PNG1125×2436 195 KB

Here are 3 images (can't upload mp4) of the application. The first two are in Edge browser on Windows the last is on iPhone.

6

You can compare your application with the online demos where everything works fine. The complete source is available here.

Alternatively if you have an active subscription you can send us your app to info@radzen.com and we will check what could have gone wrong.

7

I've removed almost everything from the MainLayout.razor like so:

@inherits LayoutComponentBase
@inject CookieThemeService CookieThemeService
@inject ThemeService ThemeService
@inject RadzenTheme RadzenTheme
@inject IJSRuntime JSRuntime

<RadzenTooltip />
<RadzenChartTooltip />
<RadzenTheme Theme="@NewTheme" />

<RadzenLayout>
   @*  <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@ToggleDisplayStyle" />

            <a href="https://sessy.nl" target="_blank" Style="background-color: beige;">
                <RadzenImage Path="/Images/sessy.svg" Style="padding: 5px;"/>
            </a>

            <RadzenPanel>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                    <RadzenLabel Text="Theme:" Style="margin-right: 10px;"/>
                    <RadzenDropDown Style="width: 200px;"
                                    Name="ThemeDropDown"
                                    TValue="string"
                                    Value="@ThemeService.Theme"
                                    ValueChanged="@ChangeTheme"
                                    Data="@Themes.Free"
                                    TextProperty=@nameof(Theme.Text)
                                    ValueProperty=@nameof(Theme.Value) />
                </RadzenStack>
            </RadzenPanel>

            <Clock />
        </RadzenStack>
    </RadzenHeader> *@
    <RadzenPanelMenu DisplayStyle="@DisplayStyle" Style="@MenuStyle">
        <RadzenPanelMenuItem Text="Batteries"
                             Click="@CollapseMenu"
                             Path="" Icon="battery_charging_full" />
        <RadzenPanelMenuItem Text="Charging hours"
                             Path="charginghours"
                             Click="@CollapseMenu"
                             Icon="grouped_bar_chart" />
        <RadzenPanelMenuItem Text="Sessy status history"
                             Path="sessystatushistory"
                             Click="@CollapseMenu"
                             Icon="error" />
        <RadzenPanelMenuItem Text="Sessy energy history"
                             Path="energyhistory"
                             Click="@CollapseMenu"
                             Icon="history" />
        <RadzenPanelMenuItem Text="Credits"
                             Path="credits"
                             Click="@CollapseMenu"
                             Icon="license" />

    </RadzenPanelMenu>
@*     <RadzenBody>
        <div class="rz-p-4">
            @Body
        </div>
    </RadzenBody>
 *@
@*  <RadzenFooter>

    </RadzenFooter>
 *@</RadzenLayout>

And now the menu shows up on the Device simulation in Edge browser. Oh, and the code for @MenuStyle is removed also.

image
image460×902 10.7 KB

8

I changed the code to use the @MenuStyle which sets the min-width to a hardcoded value. Not nice but it works on PC and iPhone.

@inherits LayoutComponentBase
@inject CookieThemeService CookieThemeService
@inject ThemeService ThemeService
@inject RadzenTheme RadzenTheme
@inject IJSRuntime JSRuntime

<RadzenTooltip />
<RadzenChartTooltip />
<RadzenTheme Theme="@NewTheme" />

<RadzenLayout>
    <RadzenHeader>
        <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" Gap="0">
            <RadzenSidebarToggle Click="@ToggleDisplayStyle" />

            <a href="https://sessy.nl" target="_blank" Style="background-color: beige;">
                <RadzenImage Path="/Images/sessy.svg" Style="padding: 5px;"/>
            </a>

            <RadzenPanel>
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                    <RadzenLabel Text="Theme:" Style="margin-right: 10px;"/>
                    <RadzenDropDown Style="width: 200px;"
                                    Name="ThemeDropDown"
                                    TValue="string"
                                    Value="@ThemeService.Theme"
                                    ValueChanged="@ChangeTheme"
                                    Data="@Themes.Free"
                                    TextProperty=@nameof(Theme.Text)
                                    ValueProperty=@nameof(Theme.Value) />
                </RadzenStack>
            </RadzenPanel>

            <Clock />
        </RadzenStack>
    </RadzenHeader>
    <RadzenPanelMenu DisplayStyle="@DisplayStyle" Style="@MenuStyle">
        <RadzenPanelMenuItem Text="Batteries"
                             Click="@CollapseMenu"
                             Path="" Icon="battery_charging_full" />
        <RadzenPanelMenuItem Text="Charging hours"
                             Path="charginghours"
                             Click="@CollapseMenu"
                             Icon="grouped_bar_chart" />
        <RadzenPanelMenuItem Text="Sessy status history"
                             Path="sessystatushistory"
                             Click="@CollapseMenu"
                             Icon="error" />
        <RadzenPanelMenuItem Text="Sessy energy history"
                             Path="energyhistory"
                             Click="@CollapseMenu"
                             Icon="history" />
        <RadzenPanelMenuItem Text="Credits"
                             Path="credits"
                             Click="@CollapseMenu"
                             Icon="license" />

    </RadzenPanelMenu>
    <RadzenBody>
        <div class="rz-p-4">
            @Body
        </div>
    </RadzenBody>
    <RadzenFooter>

    </RadzenFooter>
</RadzenLayout>

using Microsoft.AspNetCore.Mvc;
using Radzen;

namespace SessyWeb.Shared
{
    public partial class MainLayout
    {
        public static string NewTheme { get; set; } = "Dark";

        public MenuItemDisplayStyle DisplayStyle { get; set; } = MenuItemDisplayStyle.Icon;

        private const string MenuStyleIcon = "width: 100%; min-width: 50px;";
        private const string MenuStyleIconAndText = "width: 100%; min-width: 200px;";

        public string? MenuStyle { get; set; }

        protected override void OnInitialized()
        {
            MenuStyle = MenuStyleIcon;

            base.OnInitialized();
        }

        [IgnoreAntiforgeryToken]
        void ChangeTheme(string theme)
        {
            NewTheme = theme;
            ThemeService.SetTheme(theme, true);
        }

        void ToggleDisplayStyle()
        {
            if (DisplayStyle == MenuItemDisplayStyle.Icon)
            {
                MenuIconAndText();
            }
            else
            {
                MenuIcon();
            }
        }

        public void CollapseMenu()
        {
            MenuIcon();
        }
        private void MenuIcon()
        {
            DisplayStyle = MenuItemDisplayStyle.Icon;
            MenuStyle = MenuStyleIcon;
        }

        private void MenuIconAndText()
        {
            DisplayStyle = MenuItemDisplayStyle.IconAndText;
            MenuStyle = MenuStyleIconAndText;
        }
    }
}