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
1
vote
2 answers
Not able to handle change/click on inner elements (displyed using onRenderField) of ChoiceGroup in office-ui-fabric-react
I have to handle click or change on inner elements in radio button (ChoiceGroup) in office-ui-fabric-react. In the below example, I want to click on the link but am not able to.
As per my understanding, we can display the JSX element inside…
Shubhaw Kumar
- 691
- 4
- 16
1
vote
1 answer
How to change default icon of a ContextualMenu
Referring to examples of ContextualMenu in https://developer.microsoft.com/en-us/fabric#/controls/web/contextualmenu, I want to change the default icon (ChevronDown) to ChevronUp. How do I do that?
I tried a few options by providing a styles…
Putta
- 67
- 7
1
vote
1 answer
How to make DetailsList more performant when rendering a custom component in the columns?
I'm trying to render a not so big DetailsList (something between 100-200 rows) where I have a custom column with the CommandBarcomponent. One of the actions is a delete action that deletes the row itself. The problem that I am facing with this is…
pedr-bes
- 31
- 2
1
vote
1 answer
I'm not sure why the Office Fabric UI React layout classes not working
I am creating a React app and using Office Fabric UI React.
I imported the latest version using npm/yarn "office-ui-fabric-react": "7.94.0",. Here is my TSX file which is not producing the desired results:
import React from 'react';
import { Image,…
myermian
- 31,823
- 24
- 123
- 215
0
votes
0 answers
How to use print component on react-modal component to preserve the rendering css without inline styles in Spfx React 15
So I have been trying to implement a print function on the React Modal, thus I will have to implement it using inline style css. Is there any alternative library or implementation available to preserve my css using external css or scss file
My…
trollzkingopaf
- 9
- 1
0
votes
0 answers
How to apply custom styling on TextField in Office UI Fabric React so that the TextField component fits the dimensions of the table cell
I'm working on SPFX webpart on prem using React 15.6.2, Office UI Fabric React v5.135.6. I don't have access to the ITextFieldStyles library. I want to make the height of the TextField component to fit in accordance to the td dimensions. The…
trollzkingopaf
- 9
- 1
0
votes
0 answers
Can we use Fluent UI react with C++ application?
We are building a cpp application for Windows desktop with modern look and feel.
I read about how Office apps are built using and got to know that it is built using Fluent UI react V8.
And I also went through Excel.exe.mannifest file in my system…
Harshith
- 181
- 2
- 9
0
votes
1 answer
Rendering custom item columns with sorting
Can anyone help me resolve the typing issues below for a FluentUI details list?
I have the following code to display a list of items using Fluent UI details list. I need to add the functionality to sort items in each column in ascending order
like…
user989988
- 3,006
- 7
- 44
- 91
0
votes
1 answer
TextField error in console in FluentUI React
I am using TextField component provided by Fluent UI in React wherein I am rendering a custom validation error message (JSX.Element).
…
coolest-duck
- 105
- 1
- 1
- 10
0
votes
0 answers
How do you disable checkbox in GroupedList component?
I have a groupedlist component where onRenderCell returns a DetailsRow component.
agretsuko
- 41
- 1
- 5
0
votes
0 answers
Alignment Issue with fluent-ui ChoiceGroup if dir="rtl", what could be the CSS to fix this?
const { ChoiceGroup, IChoiceGroupOption, ThemeProvider, initializeIcons } = window.FluentUIReact;
// Initialize icons in case this example uses them
initializeIcons();
const options: IChoiceGroupOption[] = [
{ key: 'A', text: 'Option A' },
{…
Pravin Dahale
- 91
- 1
- 9
0
votes
0 answers
Get dark and light mode colors
How can I get the dark and light mode color strings for a theme slot?
I tried something like:
import { getTheme } from '@fluentui/react';
const theme = getTheme();
theme.palette.neutralPrimary
but that only returns the color for the current mode…
user16985970
- 1
- 1
0
votes
1 answer
set a custom input id on the combobox
Is there a way to set a custom input id on the combobox component?
pikk
- 837
- 5
- 21
- 38
0
votes
1 answer
How to make a DetailsList header shows tooltip
How to configure detailsHeader properly to make it show tooltip for the header text?
In each column, I've added ariaLabel, name, key, fieldName and have tried the top answer in this post but does not work: How to render a column header with both…
bunny
- 1,797
- 8
- 29
- 58
0
votes
1 answer
How to open modal on onclick of Detail List row in office ui fabric?
I have requirement where I want to open modal on clicking a detail list row.
We are using office ui fabric.
Lokesh Nagilla
- 1
- 1