In this document and accompanying video we will discuss the very flexible way in which we can specify column widths in the List Control.
In this List Control example we are displaying some simple data and all of the columns are the same width:
The columns also fill the available space so that if the list were wider each column would grow proportionately in size. Let's click on the Design tab then under List Properties change Width from 8 inches to 12 inches:
Click on the Working Preview tab to see the change:
And if we change the Width to 6 inches then click the Working Preview tab we see that all the columns shrink proportionately and at all times each column is the same width:
But in a practical application there are times when we will want different relative widths for each of the columns. To do that we click the Design tab, then List properties, and when the List Builder window opens click the List Layout tab. We can see that the way in which the column widths have been specified is by using a Column width called flex:
Click on the flex smart field to bring up the Column Width window. Flex is a relative term, so if we have two columns and they are both flex(1) then both columns will be the same width. But if we have two columns and the first column is flex(1) and the second column is flex(2) then the total sum of flex is 1+2=3. The first column will be 1/3 of the total width and the second column will be 2/3 of the total width:
For this example let's make the flex of column one (<LogicalRowNumber>) flex(1):
And let's give column two (Firstname) a relative size of flex(3):
Then column three (Lastname) will have a relative size of flex(5):
For column four (City) let's make it a relative size of flex(3):
Finally let's give column five (State) a relative size of flex(2):
When we run this by clicking on the Working Preview tab we see that Lastname is the widest column, the list # is thinnest:
Let's change the overall Width from 6 inches to 12 inches:
Now when we click on the Working Preview tab we see that all of the columns have grown proportionately, so Lastname has grown the most and list # the least:
We now have the ability to specify column widths using relative sizing by using the flex notation, or absolute column widths using inches, pixels, points, etc.