2

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

VIPPER
  • 326
  • 4
  • 24

1 Answers1

2

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.

Ramesh Reddy
  • 10,159
  • 3
  • 17
  • 32
  • Hey, it works! How did you find it out? I found https://learn.microsoft.com/en-us/javascript/api/office-ui-fabric-react/istackprops?view=office-ui-fabric-react-latest#grow but based on description this is some other property... and this is for Stacks, not Cards. I also couldn't find that on https://developer.microsoft.com/en-us/fluentui#/controls/web/card. Yea, there's 'grow' listed but there's no description and I don't see any further reference links on their site. – VIPPER Jul 23 '20 at 20:09
  • @VIPPER I actually found this in a weird way. I noticed that the vertical card example in the docs has the last `card.section` at the end so I looked into its code and found that. https://developer.microsoft.com/en-us/fluentui#/controls/web/card. – Ramesh Reddy Jul 24 '20 at 04:52