Hi HungTran,

Can you confirm that if you click on any given column, you are not getting the option to drag the column divider lines while editing a list view? You should be able to click on the column, then drag on the little circles that appear on each side of the selected column as shown in the following animation. I tried to duplicate the number of columns from your screenshot below. You can also select a column from the editor canvas, then click on the Column tab on the right-side properties panel to manually edit the width. 

You do have quite a few columns there, but it should allow you to display the view in a wider format if you edit the view's width in the K2 Form that it lives in. While editing the “Form” that holds your view, select the view itself and make sure the Width property is set to 100%.

Then select outside the view on the design canvas and set your Width properties in the Layout section as needed.

When you run the form, it should stretch out accordingly in the window and also let you scroll.

If you are still having trouble with not being able to change the width of your columns, you may want to open a support ticket to see if an update needs to be applied to your cloud environment.

Jason

Hi JRoberts,

Thank you for your solutions,
I edited the “Form” and the "View" like you said and I have a problem like this.

 Are there any ways to make a scroll bar just scroll the view only?

Regards,

hungtran

At the moment, there isn’t a property on the view settings that can enable that, however, it does work with adding a bit of Javascript to the form with a Data Label control.

1. Add a Data Label control to the Form and put a check in the Literal property. Uncheck the Prevent XSS property and the Visible property.
   
   
   

    

   
   
   
   
   



2. Copy the following Javascript and paste it into the Text property for the Data Label control.
   <script>$viewDiv = $("div vname='<VIEWNAME>']");$viewDiv.parent().css("overflow-x","scroll");$viewDiv.css("min-width","5000px");</script>​
   



3. Replace the text <VIEWNAME> with the actual name of your view as defined in the Name property of the view that you want to apply the scroll functionality to. This should add a scrollbar at the bottom of the view when you open it up via the Form’s URL. 
   
   
   
   



4. You can also experiment with the “min-width” pixel number in the javascript as needed. This will set how far the scroll can go if your view goes much further to the right. e.g. $viewDiv.css("min-width","5000px");
   

Hi, JRoberts.

Thank you so much. My problem is solved now.

regards,

hungtran

Glad to help! 

Does this solution still work? I’m having the same problem. I have a form with a List View with many columns, and I really could use horizontal scroll and AutoWidth of columns.
I tried this solution for horizontal scroll, but it doesn’t work.