Search code examples
cssreactjsalignmentfluent-ui

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

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

Solution

  • 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.