Kanban Cards Need To Be More Compact

Yes, I’m running against this issue as well. Even on my 30in monitor. It’s disappointing that there isn’t a compact option(s) to hide labels and reduce the vertical space.

Hi. Is there any possibility of expanding this to also placing label items in the same line as the label, if not removing the labels header entirely

As of Q1 2019, Trello starting limiting the number of boards to free groups – more than 10 boards needs to pay.

The Kanban feature of Airtable could potentially grab some market-share from teams looking for a suitable alternative to paid Trello, but the Airtable cards don’t quite “stack up” (I’m so sorry) and could benefit from some attention, especially in relation to the ideas mentioned above over a long period of time.

Longer title support is very necessary – four words is simply not enough. Even in support documentation examples we see things like “Install green lighting for…”, “New enclosure for poiso…”, “Get quote for shaking ro…”, “Checklists for earthqua…”. Any task that starts with a procedure/verb (“Get quote for”) will probably not have enough room for the subject on the card title.

The secondary field labels are a more difficult. If magical, they could be optionally included in the card. This would be useful when two fields share the same data format – e.g. “Start Date” and “End Date” would need to have labels to be effective. But if the data can stand on its own, the label could be omitted – e.g. description and owner would probably not require labels that could be easily inferred.

Airtable kanban is a great tool. Hopefully this feedback is helpful. Thanks for your time. – JVG

So folk have been complaining about this issue for a year now. Is there anyway to know if AirTable plans to fix this? Seems like they are losing market share over a failure to make basic improvements to Kanban board functionality. We are also considering a move from Trello as it’s not great for requirements management, but this might be a showstopper.

You all are asking for a feature that’s really easy to just build yoruself. Simply use the concatenate () function in the index field.

All of my KanBan cards are one line. Here’s an example function I wrote for my fish tank dosing.
CONCATENATE({Tank},’ - ',{Element}, ’ - ', {Ammount}, ’ ’ ,{Measure})

It outputs something like “Large Tank - Iodine - 2 Drops”

and I sort my KanBan by Day, So I have a weekly overview.

Very easy honestly. I don’t see why AirTable would even consider adding this when it already can be done. All of my KanBan cards are one line.

Here’s an example of what it looks like, took about 3 minutes to do. https://www.screencast.com/t/zV5zDHifO9a

I agree with the gist of the comments here but wanted to raise one more point. I would like to have separate options for what displays on the “cover” of the card and what is hidden in the record view. In short, most of my boards should have just the primary field on the cover (like @wrasse has shown but ideally with multiple lines, as in @Nathan_Broadbent’s workaround). But if I hide fields using the “Customize cards” menu, they are hidden not only on the cover but in the record itself. I’m using my base to do a lot of calculations and lookups based on what’s entered in other fields, and the record view should allow me to highlight just the fields that regularly need entry. These might be very different from the few fields I want on the cover of each card.

Wow thanks! It’s really helpful.
It’s a shame that Airtable haven’t solved this issue after two years…

Here’s a janky Tampermonkey script I wrote to have the title show more, but for super long titles it won’t do the job. Airtable, I’d love if you made this work and after working on it myself I also appreciate that it’s not a simple solution : ) !

// ==UserScript==
// @name         Kanban View Mod
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://airtable.com/*
// @grant        none
// ==/UserScript==

const MULTIPLIER = 2;
const HEIGHT = 100;
const V_CELL_SPACING = 55;

(function() {

    let isMouseDown = false;

    $(document).on('mousedown', () => {
        isMouseDown = true;
        console.log('🔴🔴🔴')
    });

    $(document).on('mousemove', () => {
        if (isMouseDown) {
            $('.light-scrollbar').each((i, scrollbar) => {
                const $container = $(scrollbar).first();
                $container.children().children().each((i, card) => {
                    $card = $(card);
                    const cardTop = parseInt($card.css('top').slice(0, -2));
                    if((cardTop - 5) % V_CELL_SPACING === 5) {
                        const topPxStr = $card.css('top');
                        const topPx = parseInt(topPxStr.slice(0, -2));
                        const newTopPx = topPx / MULTIPLIER;
//                        $card.css('top', newTopPx + 'px');
                    }
                });
            });

            const $titles = $('.kanbanCardContainer .text-dark.strong');
            $titles.each((i, title) => {
                $title = $(title);
                $titleContainer = $title.parent();
                $titleContainerContainer = $titleContainer.parent();

//                $titleContainer.css('height', 55 + 'px');
//                $titleContainerContainer.css('height', 55 + 'px');
            });
        }
    });

    $(document).on('mouseup', () => {
        console.log('up');
        isMouseDown = false;

        const $titles = $('.kanbanCardContainer .text-dark.strong');
        $titles.each((i, title) => {
            $title = $(title);
            $titleContainer = $title.parent();
            $titleContainerContainer = $titleContainer.parent();

            if ($titleContainer.outerHeight() !== HEIGHT) {
                $title.removeClass('truncate');
                //$titleContainer.css('height', HEIGHT + 'px');
                //$titleContainerContainer.css('height', HEIGHT + 'px');
            }
        });
    });

    setInterval(function() {

        const $titles = $('.kanbanCardContainer .truncate');
        $titles.each((i, title) => {
            $title = $(title);
            $title.removeClass('truncate');
        });
    }, 250);
})();



/*

const MULTIPLIER = 2;
const HEIGHT = 100;
const V_CELL_SPACING = 55;

(function() {

    let isMouseDown = false;

    $(document).on('mousedown', () => {
        isMouseDown = true;
        console.log('🔴🔴🔴')
    });

    $(document).on('mousemove', () => {
        if (isMouseDown) {
            $('.light-scrollbar').each((i, scrollbar) => {
                const $container = $(scrollbar).first();
                $container.children().children().each((i, card) => {
                    $card = $(card);
                    const cardTop = parseInt($card.css('top').slice(0, -2));
                    if((cardTop - 5) % V_CELL_SPACING === 5) {
                        const topPxStr = $card.css('top');
                        const topPx = parseInt(topPxStr.slice(0, -2));
                        const newTopPx = topPx / MULTIPLIER;
//                        $card.css('top', newTopPx + 'px');
                    }
                });
            });

            const $titles = $('.kanbanCardContainer .text-dark.strong');
            $titles.each((i, title) => {
                $title = $(title);
                $titleContainer = $title.parent();
                $titleContainerContainer = $titleContainer.parent();

//                $titleContainer.css('height', 55 + 'px');
//                $titleContainerContainer.css('height', 55 + 'px');
            });
        }
    });

    $(document).on('mouseup', () => {
        console.log('up');
        isMouseDown = false;

        const $titles = $('.kanbanCardContainer .text-dark.strong');
        $titles.each((i, title) => {
            $title = $(title);
            $titleContainer = $title.parent();
            $titleContainerContainer = $titleContainer.parent();

            if ($titleContainer.outerHeight() !== HEIGHT) {
                $title.removeClass('truncate');
                //$titleContainer.css('height', HEIGHT + 'px');
                //$titleContainerContainer.css('height', HEIGHT + 'px');
            }
        });
    });

    setInterval(function() {
        if (!isMouseDown) {

            const $titles = $('.kanbanCardContainer .truncate');
            $titles.each((i, title) => {
                $title = $(title);
                $titleContainer = $title.parent();
                $titleContainerContainer = $titleContainer.parent();

                if ($titleContainer.outerHeight() !== HEIGHT) {
                    $title.removeClass('truncate');
                    //$titleContainer.css('height', HEIGHT + 'px');
                    //$titleContainerContainer.css('height', HEIGHT + 'px');
                }
            });
        }

        $('.light-scrollbar').each((i, scrollbar) => {
            const $container = $(scrollbar).first();
            $container.children().children().each((i, card) => {
                $card = $(card);
                const cardTop = parseInt($card.css('top').slice(0, -2));
                const topPxStr = $card.css('top');
                const topPx = parseInt(topPxStr.slice(0, -2));
                const newTopPx = topPx * MULTIPLIER;

                if((cardTop - 5) % V_CELL_SPACING === 0 && !isMouseDown) {
                    //$card.css('top', newTopPx + 'px');
                    //$card.data('prevTopPx', newTopPx);
                }
                if (((cardTop - 5) % V_CELL_SPACING === 5)) {
                    console.log($card.data('prevTopPx'));
                    console.log('✅');
//                    $card.css('top', topPx * MULTIPLIER);
                }
            });


//            $container.height($container.height() * MULTIPLIER);
        });

        $('.light-scrollbar').css('overflow', 'hidden overlay');

//        $('.kanbanStackHeightContainer').css('height', '80vh');
//        $('.kanbanStackFooter').css('top', '77vh');
    }, 250);
})();

*/

Bump! This still hasn’t been fixed and it has been years!

You really really need to fix this

That’s a significant improvement ! Thanks for sharing !!

Highly appreciate your contribution, Nathan

Scott, how do you pin the Kanban to your chrome?

I’d still really like more Kanban compactness. And the titles still need to wrap to multiple lines. I’m sorry, i came back two years later to check out the kanban view again and it’s still unusable. I’m starting to regret moving my team from airtable to Trello.

Hi Nathan -
It seems that Stylish extension collects user browsing history (https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/)? Granted I read one article that seems to suggest that and it’s from 2018. Also saw some other articles saying it’s banned. (https://arstechnica.com/information-technology/2018/07/stylish-extension-with-2m-downloads-banished-for-tracking-every-site-visit/)

Any thoughts if this is still the case?

Cheers,

I just had a conversation with my VP of Engineering and this is a show stopper for him. So - please add my +1 to allow much more compact views of the Kanban cards. Not just font size but perhaps showing up to 3 fields on a single line?

Adding my +1 here. This seems like a very low effort high impact feature. Add me to github and I’ll finish it by tomorrow

Adding my +100000 for the ability to hide field labels in Kanban view: creates a far better aesthetic for clients, makes the cards easier to use and allows one to fit in more content. I switched from Knack - good decision except for this one glaring omission. Really essential. And +1 for wrapping, although I work round this by creating calculated truncated fields with ellipses - if people want the whole text, they can click through to the record.

Reducing font size in Kanban view, and Kanban view in IOs would both be very very helpful. thanks.

The solution here could be reducing font size, or for Airtable to wrap lengthy text onto multiple lines. As it stands now, Airtable cuts off lengthy text throughout the entire product line (kanban views, calendar views, charts, linked record fields, gallery views, and so much more).

I’m the biggest proponent of Airtable you will meet. I’ve overhauled two orgs to run our prod and eng teams using it as our foundation but the inability to make kanban usable is shocking. We are trying to use Airtable in lieu of Jira but since you can’t decipher cards in kanban, it’s made this very difficult.

Nathan’s tweak worked for me but it’s not working anymore! Help! Starting look at Coda and Notion to pivot if this continues to fester.

Is anyone else having issues with this as of late? It worked beautifully before but it doesn’t work on my end lately.

Kanban view needs an urgent enhancement on this. Even zooming out doesn’t solve anything, because everything zooms out. The columns and cards get thinner as the font gets smaller.

The original UserScript doesn’t seem to work any more, however I have been able to replicate the behavior along with some other changes to the cards’ styling. For more see the respective topic: (UserStyle) neat kanban