How to align Card.Section components in MS Fluent UI?

user_2245136 0
Viewed 1471

I have Card with 2 Card.Sections. I'm trying to align the second one to far right however nothing works for me. I tried:

  1. Setting sections as flex and assigning marginLeft: auto for the second one

  2. Setting Card position: relative, then adding float: right to the second one

fluent-ui reactjs alignment css
1 Answers

I faced the same issue today, here's how I solved it:

<Card horizontal tokens={cardTokens}>
  <Card.Section>
    <Checkbox
      label="todo status"
    />
  </Card.Section>
  <Card.Item grow={1}>
    <span />
  </Card.Item>
  <Card.Section styles={footerCardSectionStyles}>
    <Icon iconName="Delete" />
  </Card.Section>
</Card>

As you can see I used

 <Card.Item grow={1}>
   <span />
 </Card.Item>

between the two Card.Sections this is inserting an element with the remaining width thus pushing the second Card.Section to the end.

user_97651670
Related