cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Nijo
Helper I
Helper I

Align Office UI fabric button to right

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.

 
 
 

 

chevron.JPG

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

2 ACCEPTED SOLUTIONS

Accepted Solutions

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.


Power Maverick | Microsoft Business Application MVP

View solution in original post

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

View solution in original post

2 REPLIES 2

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.


Power Maverick | Microsoft Business Application MVP

View solution in original post

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

View solution in original post

Helpful resources

Announcements
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

R2 (Green) 768 x 460px.png

Microsoft Dynamics 365 & Power Platform User Professionals

DynamicsCon is a FREE, 4 half-day virtual learning experience for 11,000+ Microsoft Business Application users and professionals.

Users online (2,046)