Tab appears out of Page

Radzen.Blazor Components
1

Hi Radzen Team,
thank you for the amazing support for Radzen.

image
image1667×111 14.3 KB

There are many Tabs in a page. So few Tabs are going out of the visibility.
Could you please help me with this?

Thanks in advance,
Heena

2

Hi @Heena,

I'm afraid that we cannot help much just looking at your screenshot.

3

Hi,
Thanks for the reply.

image
image1121×413 73 KB

This is the code for Tabs. Page has so many Tabs that does not fit into Screen.
So it looks like below. Here you can see, After Checklist Tab, (the yellow highlated Tab) goes out of the Page.
image
image1674×326 31.7 KB

Can you please help me with the element Style, so the Tab goes to next line or any other solution to view it.

Thanks

4

Usually there is a scroll - you might need to remove the hardcoded width:

image
image1920×1080 182 KB

image
image1920×1080 207 KB

5

Thanks for the suggestion.
I have tried by removing it, but due to application level css style it is not working.

Runtime I have checked that by giving "flex-wrap: wrap" to element.style or in .rz-tabview-nav, it shows remaining tabs into next line which will work for me.

image
image1644×571 70.9 KB

But I dont know where to put this attribute "flex-wrap: wrap" in razor code.

image
image1073×335 65.8 KB

I have tried by giving into RadzenTabs style, by giving in class z-tabview-nav or by giving in new div tag. but it does not work.
Could you please help me with that?

6

You should add this CSS to your application css file.

7

Yes, but how that is what i am looking for.

8

If you add flex-wrap: wrap to that CSS rule it should work as you want it:

.rz-tab-view-nav {
   flex-wrap: wrap;
}

Just add it to the application CSS file (app.css or site.css).

9

That works! Thanks :slight_smile: