Completed
Last Updated: 06 Dec 2019 13:11 by ADMIN
Release 2.6.0

<TelerikTabStrip TabPosition="TabPosition.Top">
    <TabStripTab Title="Sofia">

    </TabStripTab>
    <TabStripTab Title="London">

    </TabStripTab>
    <TabStripTab Title="Paris">
        <TelerikTabStrip TabPosition="TabPosition.Left">
            @foreach (var item in new string[] { "one", "two", "three" })
            {
                <TabStripTab Title="@item">x</TabStripTab>
            }
        </TelerikTabStrip>
    </TabStripTab>

</TelerikTabStrip>

Completed
Last Updated: 16 Sep 2019 10:26 by ADMIN
Release 2.0.0
Created by: Brian
Comments: 2
Category: TabStrip
Type: Bug Report
1

Content inside the tabs is narrow and elements float next to each other. For example, charts or other divs have limited width (screenshot of the issue at the end of this post).

@using Telerik.Blazor
@using Telerik.Blazor.Components.Chart
@using Telerik.Blazor.Components.TabStrip
 
@*WORKAROUND 1*@
<style>
    .k-tabstrip .k-animation-container-relative {
        width: 100%;
    }
</style>
 
@*WORKAROUND 2
<style>
    .k-tabstrip .k-animation-container-relative {
        display: block;
    }
</style>*@
 
<TelerikTabStrip>
    <TelerikTab Title="First">
        First tab content.
        <div style="border: 1px solid red;">some div that must be as wide as the tab strip</div>
        Chart follows and it should also be as wide as the tab
        <TelerikChart>
            <TelerikChartSeriesItems>
                <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
                </TelerikChartSeries>
                <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 2" Data="@series2Data">
                </TelerikChartSeries>
            </TelerikChartSeriesItems>
 
            <TelerikChartCategoryAxes>
                <TelerikChartCategoryAxis Categories="@xAxisItems"></TelerikChartCategoryAxis>
            </TelerikChartCategoryAxes>
 
            <TelerikChartTitle Text="Quarterly revenue per product"></TelerikChartTitle>
 
            <TelerikChartLegend Position="ChartLegendPosition.Right">
            </TelerikChartLegend>
        </TelerikChart>
    </TelerikTab>
    <TelerikTab Title="Second" Disabled="true">
        Second tab content. This tab is disabled and you cannot select it.
    </TelerikTab>
    <TelerikTab Title="Third">
        Third tab content.
    </TelerikTab>
</TelerikTabStrip>
 
<TelerikChart>
    <TelerikChartSeriesItems>
        <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 1" Data="@series1Data">
        </TelerikChartSeries>
        <TelerikChartSeries Type="ChartSeriesType.Line" Name="Product 2" Data="@series2Data">
        </TelerikChartSeries>
    </TelerikChartSeriesItems>
 
    <TelerikChartCategoryAxes>
        <TelerikChartCategoryAxis Categories="@xAxisItems"></TelerikChartCategoryAxis>
    </TelerikChartCategoryAxes>
 
    <TelerikChartTitle Text="Quarterly revenue per product"></TelerikChartTitle>
 
    <TelerikChartLegend Position="ChartLegendPosition.Right">
    </TelerikChartLegend>
</TelerikChart>
 
 
@code {
    public List<object> series1Data = new List<object>() { 10, 2, 5, 6 };
    public List<object> series2Data = new List<object>() { 5, 8, 2, 7 };
    public string[] xAxisItems = new string[] { "Q1", "Q2", "Q3", "Q4" };
}