Resizing a column of a Grid inside of a TabStrip resizes the column *and* the Grid

Progress® Kendo® UI for Vue Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 19 Mar 2024 12:51 by ADMIN

Patrick

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(); }">
			<GridNoRecords>
				No variations were found
			</GridNoRecords>
		</Grid>
	</template>
</TabStrip>

1 comment

ADMIN

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":

https://stackblitz.com/edit/react-fhmx5i?file=app%2Fmain.jsx,index.html

    <TabStrip
      selected={selected}
      onSelect={handleSelect}
      className="tabstrip-block-tabs"
    >

            <style>
           .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.

Regards,
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!