office-ui-fabric-react (now called Fluent UI) is a component library created by Microsoft for use with React.
Questions tagged [office-ui-fabric-react]
109 questions
0
votes
1 answer
Is it possible to have horizontal stack with 2 stack items of same width?
I am trying to create a form with 2 controls inside a horizontal stack but I can't figure how to make stack use 100% of the width

Sandeep Vootoori
- 56
- 4
0
votes
1 answer
How to not leave button in selected state after click - fluent-ui (office ui fabric)
Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked.
Alternatively, is there any styling that needs to be done for selection?

unknown_boundaries
- 1,482
- 3
- 25
- 47
0
votes
1 answer
How to set font color of ToolTip in fluent-ui
Not able to set font color of ToolTipHost in fluent-ui, I tried below code but it is not working.

Imran Ali
- 87
- 3
- 11
0
votes
2 answers
Getting an error saving date value in a SharePoint List using Office UI fabric - React JS
It's my first time trying out office ui fabric react JS to develop a web part app in SharePoint online. For a test (CRUD application) project, I have developed an online book library application. I have been struggling to save / get a date value…

Mudasir Sahto
- 69
- 3
- 13
0
votes
1 answer
fluentui/react ContexualMenu items styling
Im trying to style fluentui/react ContextualMenu component. So far i've been able to achieve the look I want by recursively modifying IContextualMenuProps items prop - define styles for each IContextualMenuItem and repeating process for each submenu…

m aksem
- 553
- 1
- 5
- 13
0
votes
1 answer
React Fabric Ui Panel can't close
I have an Sharepoint app. By clicking on a command list button I open a panel.
But when I try to close the panel I get a error saying that my _renderPanelComponent function is not a function and when trying to log it from _dismissPanel() it I get…

Carl Decks
- 385
- 4
- 15
0
votes
1 answer
Add class and id to React Fabric UI pivot item headerButtonProps
I can't seem to get a className or id to render with the tab button link via the headerButtonProps in the PivotItem. I think this should be possible since version 7.114.0 added IButtonProps for the pivot button.. am I missing something obvious? My…

GingerModine
- 3
- 1
0
votes
2 answers
Office Ui Fabric Dropdown doesn't expand to its content
I am using Office UI Fabric React that comes with SPFx. It's version 6.214.0. I have a dropdown that looks like this:
setPosition(option.text)}…

M365 Dev
- 43
- 5
0
votes
1 answer
Office UI Fabric theming
I want to use the body text color in my web part, so if the theme is black, it would display text in white, if the background is white, it'd display it in black. Currently I am referencing this in my .scss file:
@import…

Brian.James
- 1
- 1
0
votes
0 answers
calling loadTheme from a .ts file
I one of my "office-ui-fabric-react" project, I am writing a utility class(common.ts) where I have a function to load theme for a page. This utility class will be included as part of the script tag in an html file as common.js.
I want to call…

Ekalavya
- 39
- 2
0
votes
0 answers
Display data in two columns with UI Fabric React
I would like to display data dynamically in 2 columns with UI Fabric React. For example I want to have 2 columns one for teachers and one for students, and each time I want to add an entry to one of these columns dynamically with code. These 2…

B1B
- 193
- 5
- 16
0
votes
1 answer
Apply colors to labels with specific sizes - FluentUI
I am reading through the docs for UI Fabric React, and I can see that we have these classes to apply font sizes to our labels: https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-typography .. I liked the size of the "Subtitle" and…

B1B
- 193
- 5
- 16
0
votes
1 answer
How to set dynamic options from API response in fluent ui react Dropdown control?
I have encountered a situation where I need to display a Dropdown and want the options to dynamically fetch from an API and load on clicking the caret (maybe show a loader by the time the API response comes through). The experience I am looking for…

Kaustabh Kakoty
- 87
- 3
- 15
0
votes
1 answer
Change the exit button style on Fluent UI's Panel
I'm using Panel from 'office-ui-fabric-react/lib/Panel' in React.
This Panel generates a little [x] button on the upper right hand corner. It is very hard to see, is there any way to change its default background color to red & modify its mouse…

Raven
- 529
- 7
- 27
0
votes
1 answer
How to change the width of NormalPeoplePicker dropdown
I'm using default example of NormalPeoplePicker from https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker#IPeoplePickerProps.
When the dropdown displays it cuts off longer items (example: 'Anny Lundqvist, Junior Manager of…

Marek
- 3
- 3