Colwidths in List View not working?

Frappe Framework Custom Script
1

I created the DocType ProjectEmployees and saw that the column “Sales Order” is not rendered fully even there is enough space. The value SAL-ORD-2021-00001 is rendered as SAL-ORD-20…

ListView%20ProjectEmployee
ListView%20ProjectEmployee1299×321 27 KB

Some googling lead me to the property “colwidths”, which I tried to apply with a client script:

So I did this ClientScript:

frappe.listview_settings['ProjectEmployee'] = {
hide_name_column: true, 
colwidths: {"sales_order": 250}
}

Unfortunately it doesn’t seem to do anything, the column is always rendered the same, even with using absurd high values.
I found no documentation on this, could anyone advise me?

The column in the DocType is of type “Link”.
Version of frappe framwework is v13.8.0 (version-13).

1 Like
2

In DocType properties I also changed the property Columns of Field sales_order to 2 and deactivated the ClientScript.
Didn’t change anything in the List View.

3

Okay… let me take a swing at this.

From my experience, column width is NOT infinitely adjustable. It is ONLY available as a function of 11 segments. In-other-words, any table is divided into 11 segments across. If you want to control the column width you must assign a column some number of segments. The total of all columns across cannot be more than 11. I have found it best to make sure every segment is defined with a number.

I have also found that if you do NOT use a fixed integer to define the number of segments in a column (1 - 11), then the system tries to work with what it has and the results are not always good. This is likely why you have a column that looks wide enough for the data but it is not completely filled because there might not be a number of segments defined for that column in the table.

Here is an example of a column definition in a BOM. In a BOM document the Items table is called “BOM ITem”

So, I go to “Customize Form” and put “BOM Item” as the form type. Then scroll down to the section labeled “Fields”

CustForm1
CustForm1736×429 41.2 KB

Then for example, I wanted to set the number of column segments for the “Item Code” of this table I click on the grey drop down arrow at the far right side of the Item Code line (see screenshot above).

This will take you to the settings for this field in the table. It will look like this:

CustForm2
CustForm2753×596 43.1 KB

Now scroll down to the very bottom of this setting page to get to the “Columns” setting. This is where you get to define width of your table column by assigning it a number between one and 11. Remember that all columns is a table cannot not exceed the total of 11 across. The system calls these imaginary segments columns. To me that only confuses the issue further.

CustForm3
CustForm3730×537 35.8 KB

Just know that each actual visible column in your table is made of of a number of segments that must total 11. These imaginary segments just happen to be called columns in this form.

Sorry, I cannot make this any less confusing. The naming convention of the system sometimes seems arbitrary at best and down right evil in other instances.

Anyway, just use this example to adjust your visible columns and make sure to have a integer value in the settings of each visible column.

So in practice, your only ability to control the width of a column is to give it a value that represents one eleventh of the total space across the table.

Hope this makes some kind of sense. It is the only way I have found to adjust these column widths.

BKM :nerd_face:

1 Like
4

Have you take a look at Data Visibility in Child Tables?

1 Like
5

Ha ha ha … You have found actual documentation for what I had to figure out for myself 3 years ago. Awesome great find!!

BKM

1 Like
6

ref: it’s based on bootstrap grid system: Grid system · Bootstrap

7

Unfortunately the Columns-Setting is ignored. I created a DocType with 3 columns called Spalte1-3.
Column Spalte3 has “Columns=3”, Spalte1 and Spalte2 have no Columns-Value specified.
In the List View all columns are rendered the same:

<div class="list-row-col ellipsis hidden-xs ">

After setting “Columns=3” for Spalte3 in the DocType I expected to see some different class used for at least Spalte3.

In Bootstrap it would be:

<div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3 
    </div>
    <div class="col-3">
      3 of 3 (wider)
    </div>
  </div>
8

You seemed to have missed the point of my post.

If you want the column values to be properly handled you MUST have a value in every visible column definition or else you will get unexpected results. Leaving Spalte1 and Spalte2 with no specified columns value is going to prevent all of the columns from displaying properly. Put a value in the “Columns” setting for each visible column and make sure the total of the values adds up to 11.

Is this behavior a bug? Maybe. All I know is that unless I assign values to all of them the table displays improperly.

BKM

9

Thanks for trying to help me out. I took the time and tried multiple combinations for the Columns-values in Spalte1-3, but nothing had any effect.

Because in the DocType itself for Columns is quoted “Number of columns for a field in a List View or a Grid (Total Columns should be less than 11)” I tried the following combinations just to be sure.

Spalte1|Spalte2|Spalte3
------------------------
2      |2      |7
1      |1      |2
1      |1      |3
1      |1      |4
1      |1      |5
1      |1      |6
1      |1      |7
1      |1      |8
1      |1      |9
1      |1      |10 (even tried a total of 12, just out of curiosity)

No combination affected the rendering of the List View. Every time the Columns Spalte1-3 were rendered in the same size.

10

I’ve seen this happen at least twice.
Where no matter what combination of values I used, I cannot make the List Grid display properly.

I haven’t found the root cause or a workaround solution yet.