responsive columns

I am trying to create a syncfusion grid in vuejs application.

Grid columns are not automatically responsive.In small monitors i am getting horizontal bars

Even if there is no data in the grid I am getting horizontal bars.

I am attaching a video for your reference. 

Am I missing any CSS or I missing some settings 

Could you please guide me to rectify it?

Thanks

Sundar

Hi Sundar, 

Greetings from Syncfusion support. 

We would like to inform you that, by default EJ2 Grid is responsive. If the combined width provided for the Grid column exceeds the viewport, then by default a horizontal scrollbar will be rendered to show the exceeding columns. This is the default responsive behavior of EJ2 Grid. Even in a Grid with empty data, the columns will still be present in Grid, so to show the columns with that certain width the scroll bar will be shown. 

If you want to auto fit the columns based on content size then we suggest you to refer to the below documentation, 

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/columns/#autofit-specific-columns 

 

We also suggest you to refer to the below documentation to know about setting responsive columns in Grid. 

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/columns/#responsive-columns 

If you still face any difficulties, please get back to us with the following details, 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

That will do for me..

Hi Sundar, 

Thanks for the update. Please get back to us if you need further assistance on this. 

Regards, 

R.Dhivya 

Hi there, 

 

Sorry, it is worked in small screen 1152 X 864 resolution but in better resolution I am able see blank space after my grid. 

How to make the grid columns to fill the parent div properly. That is columns equally fill the entire parent div. 

 

I have done the  following code as mentioned  documentation in AutoFit specific columns 

 

An image demonstrating this:

I am aware I can not use autoFitColumns when the column size is so small, then it shall have the intended effect. Is there a way to do this without having to check if the table will overflow? (a Syncfusion specific solution)

Many thanks,
Joseph

Hi Sundar, 

Grid autoFitColumns method is used to adjust width of the column based on the content width. If the Grid width is exceed the content width then Grid will display as blank for the remaining space. This is the default behavior of the autoFitColumns feature. If you want to remove this white space, you need to provide the content table width to Grid like as following code snippet, 

 

Sample link: https://codesandbox.io/s/infallible-ramanujan-wqnyc 

 

Regards, 

Balaji Sekar.