Office Fabric UI React - HoverCard width

Question

I use HoverCard Office Fabric UI React component to show preview of images, although I can configure height of the card I don't see similar properties for width. What is a possible solution to set width? I saw property styles?: IHoverCardStyles but don't understand how to use it. Thanks.

Answer 1

HoverCard.styles allows to specify style for the host element but what you are after HoverCard.expandingCardProps property.

One option to specify HoverCard custom width would be to override style via IExpandingCardProps.styles like this:

public render() {

    const rootStyle = { width: "800px" }; //set custom width 

    const expandingCardProps: IExpandingCardProps = {
        onRenderCompactCard: this.renderCompactCard,
        onRenderExpandedCard: this.renderExpandedCard,
        renderData: itemDetails,
        styles: {"root": rootStyle}
    };



    return (
        <div>
            <HoverCard expandingCardProps={expandingCardProps} instantOpenOnClick={true}>
                <div>{itemDetails.title}</div>
            </HoverCard>
        </div>
    );
}

Here is the demo for your reference