Come for the products,
stay for the community

The Atlassian Community can help you and your team get more value out of Atlassian products and practices.

Atlassian Community about banner
Community Members
Community Events
Community Groups

Enhanced Custom Fields

I will try my luck here since I cannot seem to get a response from support.

I am wanting to design a custom card template by adding my own fields. We are using the Custom Fields add-on but the "text" box option is only 1/3 column width. I would like that box to be as wide as the "description" field at the top of the card. See the image below for clarification. I would like the Blue box the be as wide as the green box.

Thanks for any help! :) 


2 answers

Hello @Jay Roebuck 

It is possible to do, but can only be done by altering the CSS of the web page on the browser side using a browser extension such as Pro for Trello.

It is achieved by altering the CCS styles for the part of the page responsible for holding the buttons. By default, that object is a grid that is 3 columns wide. By making it only 1 column wide and also making the column it's within wider and the card itself much wider, the custom fields also become much wider, as per this example:

Trello board with custom CSS.png

Here is the CSS modification that is 'injected' by Pro for Trello that causes that web page to be displayed that way:

.window {
  width: 90%;
.window-main-col {
  width: 75%;
.window-sidebar {
  width: 15%;
.custom-field-detail-badges-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));

You will see the card uses 90% of the page, the central column uses 75% of the card, and the grid that contains the custom fields is only 1 column wide.

Note. This alteration makes all the custom fields wider, not just one, and every person who uses that board will need that browser extension installed and the CSS added to see the same view of the cards.

This method of re-configuring the size and layout of the cards is useful for boards with many custom fields that require lots of data input, and the default view is too cramped to be productive.

Here is another example of a board that uses a 2 column grid for the custom fields:

Trello board with custom CSS #2.png


0 votes

I don't know of any way to do this with the Custom Fields powerup.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted in Trello

Taco Tuesday: New years' resolutions with Trello

Congratulations to @Laura Holton , our latest winner of Taco Tuesday! And thanks to @Kristján Geir Mathiesen for sharing the picture of Taco having fun with his new friend  B...

2,351 views 28 40
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you