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

RadzenTabs style issues when first tab not visible #1415

New Issue
Closed
opened 2026-01-29 17:53:21 +00:00 by claunia · 1 comment
claunia commented 2026-01-29 17:53:21 +00:00
Owner
Copy Link

Originally created by @AntonioKoB on GitHub (Oct 2, 2024).

Describe the bug
RadzenTabs have a weird styling when the first tab is not visible. The tab next to the one selected "thinks" it is mouse hovered

To Reproduce
Steps to reproduce the behavior:
The following code reproduces the issue. I made a Radzen switch to make the first tab visible or invisible so you can clearly see the issue

@page "/KobRadzenBug"

<RadzenTabs @ref=@tabs>
    <Tabs>
        <RadzenTabsItem Text="Tab 1" Visible="@isT1Visible">
            <h3>Tab 1 Content</h3>
        </RadzenTabsItem>
        <RadzenTabsItem Text="Tab 2">
            <h3>Tab 2 Content</h3>
        </RadzenTabsItem>
        <RadzenTabsItem Text="Tab 3" Selected>
            <h3>Tab 3 Content</h3>
        </RadzenTabsItem>
        <RadzenTabsItem Text="Tab 4">
            <h3>Tab 4 Content</h3>
        </RadzenTabsItem>
        <RadzenTabsItem Text="Tab 5">
            <h3>Tab 5 Content</h3>
        </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

<RadzenSwitch @bind-Value=@isT1Visible />

@code {
    private bool isT1Visible = false;

    private RadzenTabs tabs = new();

    protected override void OnInitialized()
    {
        base.OnInitialized();
    }
}

I also created a repo to store this example as a demo. Please check here

Expected behavior
When the first tab is not visible, the CSS (styling) should behave as normal

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows11
  • Browser Chrome
  • Version 129.0.6668.60 (Official Build) (64-bit)

Additional context
N/A

Originally created by @AntonioKoB on GitHub (Oct 2, 2024). **Describe the bug** RadzenTabs have a weird styling when the first tab is not visible. The tab next to the one selected "thinks" it is mouse hovered **To Reproduce** Steps to reproduce the behavior: The following code reproduces the issue. I made a Radzen switch to make the first tab visible or invisible so you can clearly see the issue ``` razor @page "/KobRadzenBug" <RadzenTabs @ref=@tabs> <Tabs> <RadzenTabsItem Text="Tab 1" Visible="@isT1Visible"> <h3>Tab 1 Content</h3> </RadzenTabsItem> <RadzenTabsItem Text="Tab 2"> <h3>Tab 2 Content</h3> </RadzenTabsItem> <RadzenTabsItem Text="Tab 3" Selected> <h3>Tab 3 Content</h3> </RadzenTabsItem> <RadzenTabsItem Text="Tab 4"> <h3>Tab 4 Content</h3> </RadzenTabsItem> <RadzenTabsItem Text="Tab 5"> <h3>Tab 5 Content</h3> </RadzenTabsItem> </Tabs> </RadzenTabs> <RadzenSwitch @bind-Value=@isT1Visible /> @code { private bool isT1Visible = false; private RadzenTabs tabs = new(); protected override void OnInitialized() { base.OnInitialized(); } } ``` I also created a repo to store this example as a demo. Please check [here](https://github.com/keeponbudget/PoC_RadzenBug) **Expected behavior** When the first tab is not visible, the CSS (styling) should behave as normal **Screenshots** ![image](https://github.com/user-attachments/assets/d7e776d3-965b-4e33-9106-8eccabb4e219) **Desktop (please complete the following information):** - OS: Windows11 - Browser Chrome - Version 129.0.6668.60 (Official Build) (64-bit) **Additional context** N/A
claunia commented 2026-01-29 17:53:22 +00:00
Author
Owner
Copy Link

@AntonioKoB commented on GitHub (Oct 3, 2024):

Thanks :) It is working now. That was a flash fix. Thanks for your quick intervention. I am impressed.

@AntonioKoB commented on GitHub (Oct 3, 2024): Thanks :) It is working now. That was a flash fix. Thanks for your quick intervention. I am impressed.
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#1415
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?