Stack Overflow
Stack Overflow

Questions tagged [office-ui-fabric-react]

office-ui-fabric-react (now called Fluent UI) is a component library created by Microsoft for use with React.

109 questions
1
vote
0 answers

Fluent UI - Nav: possibility to expand to selectedKey

is there a possiblity to automatically expand the nav to the selectedKey? I am using a nested navigation, which would totally benefit from an automatic expand. And while i found a manual solution to iterate through the items, an built-in automatic…
Michael.Roger
  • 51
  • 4
1
vote
1 answer

Handling TextField change in Fluent UI React

Using Fluent UI React, I'm displaying some data from an AppSync API in a TextField. I want to be able to show text from the API for a contact form. I then want to edit that text and click a button to post it back to the AppSync API. If I use the…
Adam
  • 350
  • 1
  • 5
  • 15
1
vote
0 answers

Persona Style is broken when I use onRenderItem in NormalPeoplePicker

I am using NormalPeoplePicker from office-ui-fabric-react. I override onRenderItem event but it breaks Persona style. I have provided two pictures and my code, I appreciate your solution. private onRenderItem(props:…
Khabir
  • 5,370
  • 1
  • 21
  • 33
1
vote
0 answers

MaskedTextField with mask overwrites characters to the right, how can I prevent this?

If I type 12345 and set the cursor between 3 and 4 and start typing this will overwrite the 4 and 5. What I want is to be able to eg. add 77 inbetween and the output will be: 123 774 5. Is there any way I can do this? My code is essentially…
milmal
  • 526
  • 1
  • 9
  • 15
1
vote
0 answers

ICommandBarItemProps doesn't support focus method

I'm implementing a command bar with several buttons on it. The buttons are of type ICommandBarItemProps and assigned to attribute "items" of . Now I want to set focus for one of the buttons using componentRef for accessibility purpose, but it says…
ybxsnail
  • 11
  • 1
1
vote
3 answers

how to pass the overlayProps into Panel

How can I pass the styles overlayProps into the Panel component as it is stated in https://developer.microsoft.com/en-us/fluentui#/controls/web/panel I tried: But does not seems to work
pikk
  • 837
  • 5
  • 21
  • 38
1
vote
1 answer

SharePoint react TextField onChanged error

When 'gulp serve' my SharePoint extension solution, I am receiving this error Type { label: string; required: true; name: string; defaultValue: string; onChanged: (text: string) => void; } is not assignable to type 'IntrinsicAttributes &…
ibrahim
  • 195
  • 1
  • 2
  • 14
1
vote
1 answer

Customization of the Height of a Pivot Item Link Line in Fluent UI

I'm trying to increase the height of the line on the selected Pivot item link in Microsoft's Fluent UI using React. Here's a screenshot for the purposes of clarification: The orange arrow is pointing to the blue line of which I would like to…
risingTide
  • 1,754
  • 7
  • 31
  • 60
1
vote
1 answer

Style components with `styles` prop or `className` prop + `mergeStyleSets`?

New to Fluent UI React. I have been tinkering around with the framework and read through all of its documentation that I can find. My understanding is that CSS-in-JS approach is encouraged when it comes to component styling. I see there are two…
tamakisquare
  • 16,659
  • 26
  • 88
  • 129
1
vote
1 answer

Is it possible to globally define links to use a specific component?

I'm currently trying to use Nav with react-router. The default behavior reloads the page, so I'm trying to use the Link component from react-router-dom. It's quite difficult to preserve the default styling when overriding linkAs. Is there any…
Domysee
  • 12,718
  • 10
  • 53
  • 84
1
vote
1 answer

Fluent UI react missing icons in Dropdown and DatePicker

I'm creating an electron-app that uses Microsoft fluent-ui lib. I have added the reference @fluentui/react": "^7.107.1 to the package.json file. When I then create a Dropdown like this …
Magnus Erkenfelt
  • 141
  • 3
  • 7
1
vote
1 answer

Overlay text for OfficeUI fabric PivotItem

is it possible to add an overlay when individual buttons in a Pivot are moused over? For example, when I hover my mouse over the Search icon I want to display overlay text saying "search". I have tried to use the OverlayTrigger from…
nsharma98
  • 223
  • 2
  • 14
1
vote
0 answers

How can I customize the icon of a Button using the Customizer component?

I am using the Customizer component to apply a specific theme and style to my Fabric/Fluent components. I would like to also customize the icons from the customizer properties. In the Customizer component source code there is a block of text which…
Jackson
  • 3,476
  • 1
  • 19
  • 29
1
vote
2 answers

Azure DevOps Extension - user theme and FluentUI components

I am developing Extension for Azure DevOps mostly using components from azure-devops-ui (Forumula Design system) which automatically takes theme from user settings. I also use some compoenents from FluentUI (former office-ui-fabric-react) but I am…
Jan Serafin
  • 91
  • 2
1
vote
1 answer

Do I need something particular to use UI Fabric PeoplePicker with React?

I'm trying to use Microsoft control PeoplePicker from UI Fabric to get an Office-feel in my app. I'm able to use control like Dropdown and button, but when I want to use PeoplePicker, I get error in code even if I change nothing. To start my…
LordOptimistic
  • 27
  • 1
  • 5
1 2
3
4 5 6 7 8