Stack Overflow
Stack Overflow

Questions tagged [fluentui-react]

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

311 questions
0
votes
1 answer

Incorrect rendering of controlled Fluent UI Checkbox components

I have a form that interacts with a database via REST API and presents several controlled Fluent UI components. For a multi-choice field, I built a component that displays a Stack with an arbitrary number of controlled Checkbox components. Below is…
Paul Rowe
  • 778
  • 3
  • 10
0
votes
1 answer

Can't install fluent UI react in an Outlook Web add-in project

I'm trying to install fluent UI on an Outlook web add-in project and I get different errors: In @fluentui/react - npm says I should use npm i @fluentui/react but I get: http fetch GET 200 http://registry.npmjs.org/@fluentui%2ffont-icons-mdl2…
cerfus
  • 21
  • 5
0
votes
1 answer

export error while bundling @fluentui/react with webpack

I am getting webpack 5.25.0 compiled with 7 warnings in 6734 ms with version 7.167.0 and with v8.10.1 I was getting 1513 they were all same and something like this, instead of createElement there will be another react function like useEffect, with…
mukuljainx
  • 716
  • 1
  • 6
  • 16
0
votes
1 answer

How to use local svg files in NavItems in Fluent UI React

I was trying to use custom svg files in my nav bar but not able to render then. I'm using fluentui-react onLinkClick={onLinkClick} className="menuLinks" selectedKey={'quickStart'} …
pavan anand chinthalapudi
  • 586
  • 6
  • 12
0
votes
2 answers

Is there a way to limit the number of selectable items in Selection component of Office UI Fabric React's Details list?

Selection Component of fluent UI has a property to let the user select either single or multiple items. However, I don't see a straight-forward way to limit the user to select certain maximum number of items. Is there a way get this done? I have…
Sampath Kumar K
  • 61
  • 1
  • 3
0
votes
0 answers

ErrorBoundary component stack does not show the names of my components. Why and how can I fix it?

Please look at the component stack I get after an error below. My own components are written as "Unknown". The other components like the ones I am using from fluentui are shown by their names, e.g as "Stack". To be able to understand where the…
O. Altun
  • 685
  • 7
  • 20
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

Multiple listboxes with multiple values search array filter in React

I'm populating an object from an O365 REST call, then filtering using multi-select dropdowns in a SPfx FluentUI Detailslist app. My code is appending the results from any of the values from each of the dropdowns versus narrowing down the results to…
detailCode
  • 537
  • 1
  • 8
  • 22
0
votes
1 answer

Microsoft Teams React App prevent style overwriting from SharePoint Online

I have developed a Microsoft Teams App with some Fluent UI React components. The app is deployed on the SharePoint App catalog and added with the app manifest to MS Teams. In MS Teams I want to use the default styles of the client. The issue is that…
theface
  • 141
  • 14
0
votes
2 answers

DetailsList is getting re-rendered and hence is loosing its state

So I have been trying to accomplish the idea that whenever the user clicks any row in the DetailsList the Button gets enabled and when the user clicks outside the selectionzone the Button gets disabled. This is my code import { DetailsList,…
Ceroy
  • 181
  • 2
  • 11
0
votes
1 answer

Embed Web Page with Fluent UI Northstar

I am trying to use the Embed component in Fluent UI Northstar to embed a SharePoint Web Page:
Christophe
  • 27,383
  • 28
  • 97
  • 140
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

How to display percentage of progress completion in progress bar using fabric UI?

I'm using fluent UI to display progress bar. Link which I refered: https://developer.microsoft.com/en-us/fluentui#/controls/web/progressindicator I'm facing difficulty in displaying percentage in progress bar using react. Can someone suggest on…
sss
  • 251
  • 5
  • 18
0
votes
1 answer

How to center button in Fluent UI Dialog component?

Dialog component in Fluent UI has DialogFooter. I want to place a button inside that footer and I want it to be in the center. How can that be achieved? I'm unable to move it from its default location. Sample code (taken from [official…
Alcibiades
  • 335
  • 5
  • 16
1 2 3
…
20 21