Setting the width of one column to be larger than the other columns in Confiforms TableView

[NA1021]

Hello,

I am using Confiforms TableView with several data columns. One of the columns is a Description field of type Textarea. Another column is called File URL of type Link. Currently, the table automatically shows all the fields with the same column widths except for the File URL column, which because the value is very long, it shows the column width to be very wide. 

The Description fields typically has several sentences and can be quite long. By default, the Description column width in the table is narrow so the value is wrapped many lines long, causing each row in the table to take a lot of space vertically. I'd like to make the Description field to be wider always than all the other columns and make the File URL column width shorter, same as the other columns, so each row doesn't take a lot of vertical space.

Is there a way to do this, perhaps using CSS?

Thanks!

Norris

[Alex Medved _ConfiForms_]

Hi @NA1021 

Take a look at this page in our wiki - https://wiki.vertuna.com/display/CONFIFORMS/How+to+create+a+table+with+fixed+width+columns+in+Confluence+with+ConfiForms

Alex

[NA1021]

Hi. Thanks for the example article.

I set the CSS on the Table View and on the Description field following the example you provided. Once I did that, I got the following:  

1. The Description column (which I set to a width of 500px) is now running over the columns to the right of it, overwriting the values on those columns.

2. All other columns appear to have a fixed width (that's a good thing) except for the File URL field, which even though the width of it's label is the same as the other columns, its value is still very wide and just like the Description field, is running over the columns to the right of it and even past the end of the table.

See below of a screenshot I took (I had to block out all confidential information).

[Alex Medved _ConfiForms_]

Consider setting the word-wrap or/and overflow CSS parameters for the field

[NA1021]

That's what I did on the Description field per the example.

word-wrap:break-word;width:500px;

Is that what you meant?

[Alex Medved _ConfiForms_]

Well, yes.. but now it's more about the "link" field

[NA1021]

Got it. So I added word-wrap:break-word;width:150px; for the File URL field and that worked to constrain the width and solved the running over the fields to the right. Yay!

What about the issue with the Description field?

[Gian Franco Morassutti]

i followed the steps by using table-layout:fixed in CSS from my table view macro and then in my confiform field macro I added the word wrap and it works. It adjusts the width of that particular column in my table. However. I don’t want my table to be fixed. I want to be able to scroll to the right and see the other fields. If i set up my table to be fixed, the labels of the other columns get crunched and you can’t read them. 

is there a way to set up the word wrap but not have my table fixed so the other column labels don’t get distorted? 

[Alex Medved _ConfiForms_]

If you dont want to make the table with a fixed layout then you will need to give constant widths for the fields that should have a fixed with

That can be done using 

max-width

width

The table view itself can be set "scrollable" (enabling "scrollable coontainer" via macro parameters)