How do I add vertical buffer space

[Alex Dettinger]

I want to move a button to a collapsable section at the bottom of my gmail addon. Adding the new section after existing code makes the collapsable section appear just below. I would like to add some buffer space between my existing section and the new section at the bottom.

I've tried adding buffer images or grids, but that keeps pushing the section below my screen and I need to scroll to see it. How can I force a cardSection to the bottom or to consistently add buffer/empty space between sections?

[cwl...@gmail.com]

Hi Alex, have you tried using the "fixed Footer" option/method?
Try the card builder site to see what I mean: (or ask chatGPT lol)

Example code:

function buildHomeCard(opts) {
    var builder = CardService.newCardBuilder();
    builder.setHeader(CardService.newCardHeader()
        .setTitle('Card header')
        .setSubtitle('Subheader')
        .setImageUrl('https://source.unsplash.com/user/erondu/1600x900')
        .setImageStyle(CardService.ImageStyle.CIRCLE));
    builder.setFixedFooter(CardService.newFixedFooter()
        .setPrimaryButton(CardService.newTextButton()
            .setText('Primary')
            .setDisabled(false)
            .setOnClickAction(CardService.newAction()
                .setFunctionName("YourFunctionNameHere")))
        .setSecondaryButton(CardService.newTextButton()
            .setText('Secondary')
            .setDisabled(false)
            .setOnClickAction(CardService.newAction()
                .setFunctionName("YourFunctionNameHere"))));
    builder.addSection(CardService.newCardSection()
        .setHeader('Existing Section')
        .setCollapsible(true)
        .setNumUncollapsibleWidgets(1)
        .addWidget(CardService.newKeyValue()
            .setTopLabel('Top label 1')
            .setContent('This is some content 1')
            .setIcon(CardService.Icon.PERSON)
            .setMultiline(false))
        .addWidget(CardService.newKeyValue()
            .setTopLabel('Top label 2')
            .setContent('This is some content 2')
            .setIconUrl('https://source.unsplash.com/random')
            .setMultiline(false))
        .addWidget(CardService.newButtonSet()
            .addButton(CardService.newTextButton()
                .setText('Button 1')
                .setTextButtonStyle(CardService.TextButtonStyle.TEXT)
                .setDisabled(false)
                .setOnClickAction(CardService.newAction()
                    .setFunctionName("YourFunctionNameHere")))
            .addButton(CardService.newTextButton()
                .setText('Button 2')
                .setTextButtonStyle(CardService.TextButtonStyle.TEXT)
                .setDisabled(false)
                .setOnClickAction(CardService.newAction()
                    .setFunctionName("YourFunctionNameHere")))
            .addButton(CardService.newTextButton()
                .setText('Button 3')
                .setTextButtonStyle(CardService.TextButtonStyle.TEXT)
                .setDisabled(false)
                .setOnClickAction(CardService.newAction()
                    .setFunctionName("YourFunctionNameHere"))))
        .addWidget(CardService.newButtonSet()
            .addButton(CardService.newImageButton()
                .setIcon(CardService.Icon.CAR)
                .setOnClickAction(CardService.newAction()
                    .setFunctionName("YourFunctionNameHere")))
            .addButton(CardService.newImageButton()
                .setIcon(CardService.Icon.BUS)
                .setOnClickAction(CardService.newAction()
                    .setFunctionName("YourFunctionNameHere")))
            .addButton(CardService.newImageButton()
                .setIcon(CardService.Icon.HOTEL)
                .setOnClickAction(CardService.newAction()
                    .setFunctionName("YourFunctionNameHere")))));
    return builder.build();
}