0

hi i am using office fabric UI to show Document card as Tiles below is my code i want icon should come at center and text at bottom in Yellow bar

    const cardStyles: IDocumentCardStyles  = {
  root: [
    {
      display: 'inline-block', marginRight: 20,  marginBottom: 20,width: 60,
backgroundColor:"white", outline:'none',borderStyle:'solid',border:0,borderColor:'#fbce07',textAlign: "center" ,color:"white",borderWidth:"thin",
selectors: {
   ':hover': {
     backgroundColor:'#fbce07' ,outline:'none',borderColor:'#fbce07'
   },
  ':after': {
    color: 'transparent',
    content: '',
    display: 'block',
    height: '1px',
    overflow: 'hidden',
    visibility: 'hidden'
  },
  ':before': {
    color: 'transparent',
    content: '',
    display: 'block',
    height: '1px',
    overflow: 'hidden',
    visibility: 'hidden'
  },

}
    }
  ]
};

const conversationTileClass = mergeStyles({ height: 90 }); 
  <DocumentCard
    aria-label={
      'Document Card with logo, text preview, and status. Conversation about annual report. ' +
      'Content preview. 3 attachments. Sent by Annie Lindqvist and 2 others in March 13, 2018.'
    }
    styles={cardStyles}
    onClick={this._OpenPanel}
  >
    <DocumentCardLogo {...logoProps}  />
    <div className={conversationTileClass}>
      <DocumentCardTitle
        title={
          'Secuirty'
        }
        shouldTruncate
        showAsSecondaryTitle
      />
    </div>
   
  </DocumentCard>

which give me below look

enter image description here

But i want a design like below

enter image description here

0

If the component DocumentCardTitle height is not necessary,you could delete it. Then add component DocumentCardTitle and DocumentCardLogo into a div and set the div centered.

Like this:

<div className={styles.icon}>
    <DocumentCardLogo {...logoProps}  />
    <div className={conversationTileClass }>
    
      <DocumentCardTitle
        title={
          'Secuirty'
        }
        shouldTruncate
        showAsSecondaryTitle
      />
    </div>
    </div>

CSS:

.icon{
    margin:0 auto
  }

enter image description here

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.