Larger/scalable text box for Custom Fields?

[Vongsawat]

Is there some way to make the Custom Fields scale according to the text within it? Some powerup or extension? The fields are positively tiny for if you want to input something a bit longer than usual..

[Vongsawat · Accepted solution]

Discovered Stylebot Chrome Extension for overriding css. No idea how to code css, but muddled around and :

.custom-field-detail-badges-grid{ display: list-item }

applied to the board url, makes the custom fields take up the entire card width, which is a good enough compromise for me. Style override only applies if you go to the board first (or refresh the page there) and not going directly to (or refreshing) a card.

[justin lovell]

Could you provide a little more detail in a step by step or a screen record of you doing this please? Super helpful!

[Vongsawat]

Note: the last Trello update changed all the css, so the piece of code that needs to be injected is different now.

Here's a step-by-step. Technically Stylebot has a sidebar where you can do all this, but the UX is confusing, so doing it through what amounts to their Settings page is easier:

1. Get Stylebot extension
2. Right click the Stylebot icon and go to Options
3. In the new window, go to the Styles tab if you're not already there
4. click the blue "Add a new style" button
5. in the url field, type trello.com
6. in the body type .fDBBKZDYzLQu1h { display: inline }
7. save, make sure the created style has a tick
8. open/refresh the trello page

If it works, you can tinker from there. Change the url so it only applies to a board etc. though you have to refresh on said board for the stylebot to apply.

----

As for how to figure out how to tinker with the Trello page elements more generally (intermediate).

You can rightclick anything on a trello page and click Inspect. In the sidebar that comes up, in the top left there's an icon that allows you to inspect any element on the screen, bringing you to the line of code that controls it. Every line of code, the bottom half of the sidebar will then have a bunch of lines like "display: block" where you can replace the latter half (it provides a dropdown if you delete the value sometimes) and you'll immediately see what that looks like on the Trello.

Whatever you change, it'll have some header, usually a dot followed by random characters. So try typing that in to the Stylebot script in the format of .theHeader { someProperty: yourChangedValue } and see if it works.

Usually very hit and miss, trial and error kind of thing. Where you just try changing every value on various lines of code in hopes that it does what you want. Then hope that the header its under is being applied to all elements/cards/rows/etc. and not just the one you clicked etc.

Hope that helps. And that the intermediate step isn't too confusing. The first half should work, if you just want the wider custom field textboxes.