How to make a Stack element fill 100% height in a Box container (admin page jira component)?

Forge
,
1

I’m working on a React component using @forge/react and facing an issue where a <Stack> element does not fill the full height of its parent <Box>.

The parent <Box> has a fixed height of 185px, and I need the <Stack> inside it to stretch and utilize 100% of this height. I’ve set spread="space-between" and grow="fill" on the <Stack> to try and make it fill the available space, but it doesn’t seem to work as expected.

Dependencies:

  • react: ^18.2.0
  • @forge/react: 10.7.0

Here’s the relevant code snippet:

import { Box, Heading, Icon, Inline, Stack, Text } from '@forge/react';

export const InfoBlock = ({
                              title, thresholdValue, criticalCount, warningCount
                          }: {
    title: string,
    thresholdValue: number,
    criticalCount: number,
    warningCount: number,
}) => {
    return (
        <Box
            xcss={{
                borderRadius: 'border.radius',
                borderStyle: 'solid',
                borderWidth: 'border.width',
                borderColor: 'color.border.accent.gray',
                padding: 'space.150',
                width: '100%',
                height: '185px',
            }}
        >
            // I NEED THE STACK ELEMENT BELOW 100% height
            <Stack spread={'space-between'}
                   alignBlock="stretch"
                   grow={'fill'}
                   space="space.400">
                {/* Title and threshold */}
                <Stack grow={'hug'} alignBlock={'stretch'}>
                    <Inline alignInline={'center'}>
                        {/* Placeholder for multiline header */}
                        <Box xcss={{ height: '70px' }}></Box>
                        <Heading as="h2">{title}</Heading>
                    </Inline>
                    <Inline alignInline={'center'}>
                        <Heading as="h3">
                            <Box xcss={{ color: 'color.text.accent.blue' }}>
                                Threshold: {thresholdValue}
                            </Box>
                        </Heading>
                    </Inline>
                </Stack>
                {/* Status data */}
                <Stack space="space.100" alignInline="stretch" alignBlock="end" grow={'fill'}>
                    <Inline space="space.050">
                        <Box xcss={{ width: '25%' }}>
                            {(() => {
                                if (criticalCount === 0 && warningCount === 0) {
                                    return (
                                        <Icon
                                            label="Success"
                                            primaryColor="color.icon.success"
                                            size="large"
                                            glyph="editor-success"
                                        />
                                    );
                                } else if (criticalCount === 0 && warningCount > 0) {
                                    return (
                                        <Icon
                                            label="Warning"
                                            primaryColor="color.icon.accent.yellow"
                                            size="medium"
                                            glyph="info"
                                        />
                                    );
                                } else if (criticalCount > 0) {
                                    return (
                                        <Icon
                                            label="Critical"
                                            primaryColor="color.icon.danger"
                                            size="medium"
                                            glyph="cross-circle"
                                        />
                                    );
                                } else {
                                    return null; // Default case if none of the conditions match
                                }
                            })()}
                        </Box>
                        <Box xcss={{ width: '75%' }}>
                            {criticalCount != null && (
                                <Inline alignBlock={'center'}>
                                    <Heading as='h5'>
                                        <Text>
                                            Critical: {criticalCount}
                                        </Text>
                                    </Heading>
                                </Inline>
                            )}
                            {warningCount != null && (
                                <Inline alignBlock={'center'}>
                                    <Heading as='h5'>
                                        <Text>
                                            Warning: {warningCount}
                                        </Text>
                                    </Heading>
                                </Inline>
                            )}
                        </Box>
                    </Inline>
                </Stack>
            </Stack>
        </Box>
    )
}

What I need:
The <Stack> element should consistently span the full height of the parent <Box> (185px), allowing proper alignment and spacing for its child elements.

flex: 1 not working inside box (display: block), would be awesome just set height:100% to Stack element.

Does anyone know how to fix this?

2

The grow property is for width control. If you want it to take up space automatically (like stretch-between), you should take out space="space.400", which would seem to push the space out beyond the natural size.

Although I don’t think the Stack component actually accepts stretch as a value for alignBlock, despite what the table in the docs and the type say. But spread="space-between" seems to have an effect to take up the entire space.

3

Hello @OlehKosar,

Thank you for raising this request. I believe that might not be filling its parent due to the width controls already being set on .

Perhaps try removing space="space.400" and try using spread="space-between" so that it automatically takes up the allocated height from .

I hope that helps

4

Hello @HanLe, @AaronCollier

Unfortunately your thoughts (which also seem logical to me) didn’t work as expected.

Although I’m setting display: flex for wrapper in Chrome dev console and it behaves the way I’m expecting.
Although in code I can’t do this.

5

Hello here,

I’m facing the same issue.

With this basic example it just doesn’t do what it’s supposed to do

import ForgeReconciler, { Box, Stack, Text, xcss } from '@forge/react'

const App = () => {
  return (
    <Box xcss={xcss({ height: '600px' })}>
      <Stack spread='space-between'>
        <Text>Top</Text>
        <Text>Bottom</Text>
      </Stack>
    </Box>
  )
}

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Screenshot 2025-01-31 at 10.36.52
Screenshot 2025-01-31 at 10.36.521720×1582 110 KB

1 Like
6

Hi @OlehKosar @GuillaumeBero , for your use case, you will need to add a Box of your preferred height next to the Stack in an Inline as shown in our example https://developer.atlassian.com/platform/forge/ui-kit/components/stack/#spread

const StackSpreadExample = () => {
  return (
    <Inline alignBlock="stretch">
      <Stack spread="space-between">
          <Text>Top</Text>
          <Text>Bottom</Text>
      </Stack> 
      <Box xcss={{height: '185px'}} />
    </Inline>
  );
}

image
image326×218 1.38 KB

7

Hi @QuocLieu,

thanks for your reply. That works

2 Likes