SharePoint Asked by kumar on December 4, 2020
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
But i want a design like below
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
}
Correct answer by Amos_MSFT on December 4, 2020
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP