Data grids are great when you need a repeating table with a dynamic number of rows. Team Forms will automatically change the width of the columns to best fit the content, however, sometimes it can be useful to have more control.
Option 1 - Custom CSS
You can use the custom CSS feature to change the minimum width of a specific column. For example the CSS below will increase the width of the second column to 300 pixels.
td:nth-child(2) {
min-width: 300px;
}
Alternatively we can also use the same approach to reduce the width of a column
td:nth-child(4) {
max-width: 100px;
}
Option 1 - Style Attributes
This can be achieved by adding custom CSS to any Team Forms component. This allows you to control some aspects of that component's look and feel though this approach is very limited and will only work for some components (i.e. the textfield). CSS can be a very complex topic which we won't cover here, however, we will look at the simple example of changing the width of a component.
Navigate to the Layout tab of your component settings
Add a style attribute and for the value add the CSS below
min-width: 100px;
Option 2 - Insert HTML in label
For some component like the drop-down menu the style tab will not work. In these situations you can insert HTML into the label property to force the width of the column to increase. In the example below we increase the width the following html. this method will not work for reducing the width of a column.
<div style="min-width:200">Column heading</div>
