Progress bar component not showing up within Group/Stack

Question

Whenever I try to place a progress bar inside a Group/Stack, it does not show up on my webpage. It works only when I place it outside the Group/Stack. Here is the code and results:


import { Stack, ThemeIcon, Text, Progress, Group, Button } from "@mantine/core";

interface SkillProps {
  name: string;
  icon: JSX.Element;
}

function Skill(props: SkillProps) {
  return (
    <>
      <Group>
        <ThemeIcon size={50} radius={25} variant="outline">
          {props.icon}
        </ThemeIcon>

        <Stack align="center" spacing={5}>
          <Text>{props.name}</Text>
        </Stack>

        <Progress value={50} />
      </Group>
    </>
  );
}

export default Skill;

When placed within Group/Stack: Result

When placed outside Group/Stack: Result

Anyone has any idea why this is happening?

score 0 · Accepted Answer · answered Dec 24 '22 at 09:51

It seems that this might be because Progress does not have a specified width from parent container when in Group or Stack.

For use in Group, try add flex:"1" to Progress with the sx prop, which will make it take the remaining space in Group:

<Group>
  <ThemeIcon size={50} radius={25} variant="outline">
    {props.icon}
  </ThemeIcon>
  <Stack align="center" spacing={5}>
    <Text>{props.name}</Text>
  </Stack>
  <Progress value={20} sx={{ flex: "1" }} />
</Group>

For use in Stack, try add alignSelf: "stretch" instead for similar result:

<Group>
  <ThemeIcon size={50} radius={25} variant="outline">
    {props.icon}
  </ThemeIcon>
  <Stack align="center" spacing={5}>
    <Text>{props.name}</Text>
    <Progress value={20} sx={{ alignSelf: "stretch" }} />
  </Stack>
</Group>

Progress bar component not showing up within Group/Stack

1 Answers1