web
You’re offline. This is a read only version of the page.
close
Skip to main content

Notifications

Announcements

Community site session details

Community site session details

Session Id :
Power Platform Community / Forums / Power Apps / Align Office UI fabric...
Power Apps
Unanswered

Align Office UI fabric button to right

(0) ShareShare
ReportReport
Posted on by 61

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

I have the same question (0)
  • Verified answer
    Danish N. Profile Picture
    186 on at

    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.

  • Verified answer
    Nijos Profile Picture
    61 on at

    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

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Forum hierarchy changes are complete!

In our never-ending quest to improve we are simplifying the forum hierarchy…

Ajay Kumar Gannamaneni – Community Spotlight

We are honored to recognize Ajay Kumar Gannamaneni as our Community Spotlight for December…

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 796 Most Valuable Professional

#2
Michael E. Gernaey Profile Picture

Michael E. Gernaey 327 Super User 2025 Season 2

#3
Power Platform 1919 Profile Picture

Power Platform 1919 268

Last 30 days Overall leaderboard