Last Updated: 19 Mar 2024 12:51 by ADMIN
Created on: 19 Mar 2024 03:04
Category: Kendo UI® for Vue
Type: Bug Report
Resizing a column of a Grid inside of a TabStrip resizes the column *and* the Grid


I have a Grid inside a TabStrip. Resizable is set to true. If I resize the column, the column will change size but at the same time the width of the Grid will also change size proportional to the change in size of the column.

If I move the Grid to be outside of the TabStrip, resizing the column will not alter the width of the Grid. This is the behaviour I was expecting.

Here is some sample code that reproduces the issue.

<TabStrip :selected="0" :tabs="[
		title: 'Paris',
		content: 'Paris',
	<template v-slot:Paris>
		<Grid ref="grid" :style="{ 'max-height': '600px' }" :data-items="variations" :resizable="true"
			:reorderable="false" :columns="caseGridColumns" :loader="loader"
			@rowclick="(ev) => { caseStore.setCaseId(ev.dataItem.cases.caseid); getData(); }">
				No variations were found

1 comment
Konstantin Dikov
Posted on: 19 Mar 2024 12:51

Hi Patrick,

Thank you for contacting us.

The content of the TabStrip tabs has a container with display set to "inline-block", which is why it expands based on the content. Since the Grid in question does not have explicit width and the parent container will expand based on the content, the Grid will change its total width based on total of the columns width.

To resolve this you can set a class name to the TabStrip and use it as a selector to change the display of the content to "block":


           .tabstrip-block-tabs .k-tabstrip-content > .k-animation-container{
               display: block; 

Please give this a try and let us know if everything works as expected.


Konstantin Dikov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources