Answered

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)

Sort by

Verified answer

Danish N. 186 on at

Like
a
(1)

Report
Copy link

Link copied!
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
a
(0)

Report
Copy link

Link copied!
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