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

Issue with RadzenTabsItem Template in Material-base Theme #1189

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

Originally created by @Lemaus123 on GitHub (Apr 10, 2024).

Description
The bug is related to modifying the template in the RadzenTabsItem component. By clicking on the rows of my table, it opens tabs dynamically to see more information about the selected item.

I modified the template to add an icon represented by an 'x' at the end of the tab to be able to close it.

In the dark-base and standard-base themes, it works, but not in the material-base theme.

I saw that there are some issues created regarding the material-base theme, but I took the time to open a new issue.

Reproduction
Create a RadzenTabs component and add a template to the RadzenTabsItem similar to this.

<RadzenTabsItem>
     <Template>
         <span @onclick="() => function(sim.Id)">
	            @sim?.Name
         </span>

         <span style="display: flex; gap: 6px; margin-left: 5px; cursor:pointer">
	            <RadzenIcon IconColor="@Colors.Danger" Icon="close" Size="ButtonSize.ExtraSmall" @onclick="() => function2(sim)"/>
         </span>
     </Template>
<RadzenTabsItem>

Screenshots
On this dark theme, the 'x' button works properly. It calls my function, and everything works well.
image

This is the non-working material-base theme.
image

Desktop (please complete the following information):
I'm using Brave, but I doubt the browser is the problem since other themes work well.

Originally created by @Lemaus123 on GitHub (Apr 10, 2024). <!-- IMPORTANT: Read this first!!! 1. If you own a Radzen Professional or Еnterprise subscription you can report your issue or ask us a question via email at info@radzen.com. Radzen staff will reply within 24 hours (Professional) or 16 hours (Enterprise) 2. The Radzen staff guarantees a response to issues in this repo only to paid subscribers. 3. If you have a HOW TO question start a new forum thread in the Radzen Community forum: https://forum.radzen.com. Radzen staff will close issues that are HOWTO questions. 4. Please adhere to the issue template. Specify all the steps required to reproduce the issue or link a project which reproduces it easily (without requiring extra steps such as restoring a database). --> **Description** The bug is related to modifying the template in the RadzenTabsItem component. By clicking on the rows of my table, it opens tabs dynamically to see more information about the selected item. I modified the template to add an icon represented by an 'x' at the end of the tab to be able to close it. **In the dark-base and standard-base themes, it works, but not in the **material-base** theme.** I saw that there are some issues created regarding the material-base theme, but I took the time to open a new issue. **Reproduction** Create a RadzenTabs component and add a template to the RadzenTabsItem similar to this. ```c# <RadzenTabsItem> <Template> <span @onclick="() => function(sim.Id)"> @sim?.Name </span> <span style="display: flex; gap: 6px; margin-left: 5px; cursor:pointer"> <RadzenIcon IconColor="@Colors.Danger" Icon="close" Size="ButtonSize.ExtraSmall" @onclick="() => function2(sim)"/> </span> </Template> <RadzenTabsItem> ``` **Screenshots** On this dark theme, the 'x' button works properly. It calls my function, and everything works well. ![image](https://github.com/radzenhq/radzen-blazor/assets/115738837/9af7a9dc-c84f-479d-ac26-1d6753d84559) This is the non-working material-base theme. ![image](https://github.com/radzenhq/radzen-blazor/assets/115738837/91263bcf-45c9-4ece-8669-513cfe7a6808) **Desktop (please complete the following information):** I'm using Brave, but I doubt the browser is the problem since other themes work well.
claunia commented 2026-01-29 17:50:08 +00:00
Author
Owner
Copy Link

@yordanov commented on GitHub (Apr 10, 2024):

Hi @Lemaus123,

Maybe you can try with a RadzenButton instead of RadzenIcon?

Here is the button configuration that makes it look like a blank icon only button and adds a z-index so that it works in Material:

<RadzenButton Style="z-index:2" Icon="close" ButtonStyle="ButtonStyle.Danger" Size="ButtonSize.ExtraSmall" Variant="Variant.Text" />

Also you don't need the <span style="display: flex; gap: 6px; margin-left: 5px; cursor:pointer"> the way it is.

See this forum topic for more info.

@yordanov commented on GitHub (Apr 10, 2024): Hi @Lemaus123, Maybe you can try with a RadzenButton instead of RadzenIcon? Here is the button configuration that makes it look like a blank icon only button and adds a z-index so that it works in Material: ```html <RadzenButton Style="z-index:2" Icon="close" ButtonStyle="ButtonStyle.Danger" Size="ButtonSize.ExtraSmall" Variant="Variant.Text" /> ``` Also you don't need the `<span style="display: flex; gap: 6px; margin-left: 5px; cursor:pointer">` the way it is. See this [forum topic](https://forum.radzen.com/t/radzen-tabs-close-by-click/12332/2) for more info.
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#1189
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?