We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

responsive columns

Hi there,

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?


Attachment: Search__Work_Allocation_(1)_919d5408.7z

6 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team April 15, 2019 10:26 AM UTC

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, 
We also suggest you to refer to the below documentation to know about setting responsive columns in Grid. 

If you still face any difficulties, please get back to us with the following details, 
  1. Share the full Grid code.
  2. Share with us your complete requirement.

Please get back to us if you need further assistance. 

Thavasianand S. 

SS sundar sambandam April 18, 2019 09:44 AM UTC

Thank you .
That will do for me..

DR Dhivya Rajendran Syncfusion Team April 19, 2019 12:20 PM UTC

Hi Sundar, 

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


GM Gangabharathy Murugasen Syncfusion Team April 22, 2019 04:12 AM UTC

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 
     dataBound: function() {
        this.$refs.grid.autoFitColumns(['OrderDate', 'CustomerID']); 
Higher resolution screen shot. 
Lower resolution screen shot 

JO Joseph February 27, 2020 12:17 PM UTC

I am having a similar issue where is blank space after the grid when allowing databound to receive autoFitColumns, is there a way to allow the grid columns to auto fit to the full width of the grid?

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,

BS Balaji Sekar Syncfusion Team March 2, 2020 01:21 PM UTC

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, 
    dataBound: function() { 
      let gridInstance = this.$refs.grid.ej2Instances; 
      gridInstance.width = gridInstance.getContentTable().offsetWidth; // Set Grid content width to Grid width  
Balaji Sekar. 

Live Chat Icon For mobile
Up arrow icon