Kanban Cards Need To Be More Compact

[Dan_Kang1]

I am trying to convert from Asana to Airtable using Kanban cards. But the Kanban cards, even with the recent improvements hiding fields if they are empty, are still too chunky. Using a non Kanban view on Asana. I can see 15 tasks without having to scroll down, and their Kanban view will show around 5 tasks. But with Airtable, the cards are so huge, I can only see 2 or 3 cards before I have to scroll down.

If there was an option on each card to show a compact view or a standard view, it would greatly improve the usability of Kanban cards with airtable.

The compact view only needs to show the title, and if you want to see more of the card you can toggle the standard view.

This would greatly increase the usability and help me move everything off of Asana.

[wrasse]

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

[Robert_Heaton]

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.

[Paulina_Saez]

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

[Jonathan_Leung]

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);
})();

*/

[Aden_Power]

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

[Karl_L]

You really really need to fix this

[Antoine_Boucaul]

Nathan_Broadbent:

Airtable - Better Kanban Titles

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

[Canh_Phan]

Highly appreciate your contribution, Nathan

[Mignon_Murphy1]

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

[Daniel_Huggins]

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.