Completed
Last Updated:
16 Sep 2019 10:26
by ADMIN
Release 2.0.0
Brian
Created on:
31 Jul 2019 08:54
Category:
TabStrip
Type:
Bug Report
Tabs limit the width of their content
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" };}
Attached Files:
2 comments
ADMIN
Marin Bratanov
Posted on:
31 Jul 2019 13:11
Brian
Posted on:
31 Jul 2019 11:38
Workaround 1 worked for me. Work around 2 didn't change anything.
This works
.k-tabstrip .k-animation-container-relative {
width: 100%;
}
