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 there a way to add input field in nav element using React FluentUI (@fluentui/react)?
The examples on website show many examples of navbars with links.
Image of navbar demo as shown on website.
I want to implement a search bar inside the nav element like this. Is there a way to do it?
user14259168
0
votes
1 answer
Is there a simple way to change the chevron icons in a nested Nav component?
I personally and a lot of customers think the default icons for links with nested items in the Nav component are strange. Hence I want their look and behavior to change from this:
to this:
(In the screenshots the size is also different, but that's…
alex3683
- 1,460
- 14
- 25
0
votes
1 answer
How to render custom icons (not Office UI Fabric Icons) in INavLink in react application
Am using Nav from office-ui-fabric-react and rendering a Nav bar with icons like here https://learn.microsoft.com/en-us/javascript/api/office-ui-fabric-react/inavlink?view=office-ui-fabric-react-latest#icon. My requirement is to render some custom…
Diksha Mundhra
- 121
- 2
- 12
0
votes
1 answer
Getting value of a Fluent UI dropdown without TypeScript in ReactJS
As you all know, in a normal dropdown, you can get the value of it onchange with onChange={e => this.setState({ whatever: e.target.value })}. The thing is, in Fluent UI React, this does not work, since it has a custom value handling system. In the…
Liightninggod
- 65
- 2
- 7
0
votes
2 answers
Problem using office-ui-fabric Panel with SPFx webpart on modern page
I wrote a react based webpart that is displaying a panel on the right side of the screen using the Office UI Fabric React Panel component. The webpart works fine in the workbench.
However when deploying it to a modern page, the panel gets rendered…
Gerry
- 11
- 2
0
votes
0 answers
Convert functional component in Class Component in office fabric React js?
I want to convert the functional component to class component.The code of modal is given below in office fabric class component.I want to convert in class component.I am new in the React and facing some difficulty while conversion functional to…
Sharad kumar
- 187
- 2
- 14
0
votes
0 answers
What component to use to navigate between pages like Microsoft Homepage?
I'm trying to make a header to my website like the header of the Microsoft's website Homepage:
Microsoft Homepage Header.
The component from Fluent UI that I think is the most similar is the Pivot, but the best practices section says: "Don’t use the…
user12610261
0
votes
1 answer
Error with forwardRef and ui-fabric component
I get an error when I use forwardRef and the DatePicker component of office-ui-fabric. I am trying to create a functional component and return the reference to the fabric component.
My code is as follows:
import React, { forwardRef } from…
0
votes
1 answer
Is there a way to customize on-hover styles for FluentUI drop-down control?
I am using FluentUI drop-down control and can't find a way to customize the on-hover styles. I want to change the on-hover color to blue from grey. I tried following but it didn't seem to work.
Any help would be highly appreciated.
const…
s.singhal
- 1
- 2
0
votes
1 answer
Override z-index of Panel layer
I am trying to override the Panel layer styles and decrease the index to 999998 in order to achieve my div to be above the grayed layer and below the panel when Panel is opened. So I tried to override the overlayProps , but as i see there is a Layer…
user1292656
- 2,502
- 20
- 48
- 68
0
votes
1 answer
Context Menu not reflecting check/uncheck on click
I have a context menu on click of a button. There are 3 items which are initially checked. On click of each item, I am toggling the check. The check/uncheck is not reflecting while the context menu is open. This used to work earlier but with the…
Putta
- 67
- 7
0
votes
3 answers
Do not make the width of the button proportionnel to the width of the popup window
I want to make a button in a popup window as Script Lab as follows. Note that, in Script Lab, the width of the button is enough to hold the sentence in one line, even though the popup window is not very wide:
I almost use the same code as…
SoftTimur
- 5,630
- 38
- 140
- 292
0
votes
1 answer
how to add custom html attribute with fabric react nav component?
I am using
import { Nav } from 'office-ui-fabric-react';
function CustomNav(props) {
return ;
}
For nav object, I want to add custom html…
Ronak SHAH
- 171
- 2
- 11
0
votes
1 answer
What is the best way to override the behavior of Picker Component of FluentUI?
What I would like to do is...
- Change the callout that appears when the user tries to type something. I want to add a custom component with a Search Box and also the ability for the user to choose the category.
- Change the look of rendered text.…
Ashit Vora
- 2,902
- 2
- 27
- 39
0
votes
1 answer
How to get unmasked value from MaskedTextField - FluentUI
I'm using MaskedTextField component from Microsoft FluentUI library. I'm trying to get unmasked value from the component but no success. I tried both controlled component approach by passing value to props, and uncontrolled component approach by…
Khoait
- 328
- 4
- 18