Unanswered

Align Office UI fabric button to right

(0) Share

Report

Posted on by Nijos

Hello,

I haven't worked with office UI or react but Somehow managed to create a button, but it's aligned to left, I need it to be right-aligned.

Below is the react code.

 render() {
 
 
 var emojiIcon: IIconProps = { iconName: 'DoubleChevronRight', };
 
 emojiIcon.style={float:'right',color:'#000000'};
 return (
 
 <IconButton iconProps={emojiIcon} title="Next" ariaLabel="Next"onClick={(e) => {
 this.props.onChange(true)
 
 }} />
 );
 }

No CSS files used, Can someone advise, please?

Many Thanks.

Nijo

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (2)

Answers (2)

Verified answer

Danish N. 186 on at

Like (1)

Report
You can use div and wrap your IconButton and have div align contents right. Code snippet below.

return ( <div align="right"> <IconButton iconProps={emojiIcon} title="Next" ariaLabel="Next"onClick={(e) => { this.props.onChange(true) }} /> </div> );

Hope that helps.

Was this reply helpful? Yes No
Verified answer

Nijos 61 on at

Like (0)

Report
Hi Danz,

Thank you for your input, I was getting the following error when trying to add align property to a div.

(JSX attribute) align: string
Type '{ children: Element; align: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
Property 'align' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)

However, with few google searches on aligning a div gave me the solution.

return ( <div id="child" style={{ display: "flex", justifyContent: "flex-end" }}> <IconButton iconProps={emojiIcon} title="Next" ariaLabel="Next"onClick={(e) => { this.props.onChange(true) }} /> </div> );

Many Thanks again for the input.
Nijo

Was this reply helpful? Yes No