Stack Overflow
Stack Overflow

Questions tagged [office-ui-fabric]

Questions around the Office UI Fabric development and components. Office UI Fabric is a library providing a set of components to help developers build their apps faster with a look and similar to Microsoft Office controls

Office UI Fabric is a library providing a set of components helping developers to build apps looking like Microsoft Office.
These components are JavaScript and CSS based.

Please upload a reduced example of your problem to https://aka.ms/fabricpen and paste the link with your question. Makes it easier to understand the whole issue better.

432 questions
13
votes
2 answers

@fluent-ui/react vs @fluent-ui/react-northstar

I'm looking for some guideline what's the difference between @fluent-ui/react and @fluent-ui/react-northstar. This documentation (READMEs) are super imprecise. I'm don't understand which one to use for what. I'm writing that react-component to be…
speedingdeer
  • 1,236
  • 2
  • 16
  • 26
13
votes
2 answers

How to resolve "element.getBoundingClientRect is not a function"

I've got a component and want to use the Office-UI-Fabric-react component "Callout" when the mouse is hovering over a "Persona"-element. The "Callout" works if I reference the 'div' enclosing the "Persona"-element (using…
user4531
  • 2,525
  • 7
  • 30
  • 38
10
votes
2 answers

Disable rows in an Office UI Fabric React DetailsList

I am trying to conditionally disable mouse click events on certain rows in a OUIF DetailsList. But I can't seem to get it to work. I tried overriding onRenderRow and setting CheckboxVisibility to none but it was still clickable. Then I tried…
LeonidasFett
  • 3,052
  • 4
  • 46
  • 76
8
votes
3 answers

Microsoft office-ui-fabric-react vs fluent-ui-react - which to choose?

These projects seem closely related. Someone from the office-ui-fabric team made the following comment in August 2019: We're actually in the middle of working with MSFT marketing team to somehow change this to not be branded as Office only. We are…
jugglingcats
  • 698
  • 9
  • 29
7
votes
1 answer

Unit test case is failing in my React app because of some issue in fabric

I am new to react and also wanted to use office react ui for one of our requirement i followed the git hub and able to use office ui react components in my components but while running my first test case for App.js it is giving me below…
Nagaraju
  • 113
  • 1
  • 7
7
votes
2 answers

Change the color/theme of Office UI Fabric React components?

I'm trying to use Office UI Fabric React components in my web app. Is there a way to change the color or theme of the components? For example, I tried something like this: ReactDOM.render(
Yutao Huang
  • 1,503
  • 1
  • 13
  • 25
6
votes
0 answers

Using a Toast like UI widget in Fluent UI

I have been using Fluent UI to implement the UI for an Excel add-in that I'm working on. I need a way to display a series of pop up notifications that do not require user input, but just serve to notify the user that something happened. What I want…
koushtavc
  • 71
  • 1
  • 3
6
votes
2 answers

office-ui-fabric / fluent-ui Grouped DetailsList

Today I tried to use the Grouped DetailsList of the fluent-ui. What I expected: I need to declare some groups, let's say red, blue, green and then just add to each item, I want to add to the List, a specific property, that maps the Item to the…
dE_
  • 63
  • 1
  • 4
6
votes
1 answer

Can I use Office UI Fabric React in a non-Microsoft internal application?

I was wondering if I can just use the Office React Fabric UI framework in a company internal application that is not related to Microsoft services such as SharePoint or Office. I read the License but didn't quite clear my…
Paul Sancer
  • 228
  • 3
  • 5
6
votes
2 answers

Using JS and TS in a react project

I created a new react project by following directions here https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/excel-quickstart-react It creates a typescript react project. I copied my existing react JS files in the src directory and…
iJK
  • 4,655
  • 12
  • 63
  • 95
6
votes
0 answers

Command bar hide action labels when too small

Expected behavior This is what I'm trying to achieve with the CommandBar. When there's not enough space for the items label I want to hide the labels and not go in the overflow menu. When I resize the CommandBar I want the labels to reappear if…
C1rdec
  • 1,647
  • 1
  • 21
  • 46
6
votes
1 answer

disable check on a row click in DetailsList

I want to use the check column to select which products to put into a shopping cart. In the same time, I'd like clicking on the row to just open a product view without making a selection. Currently, if I click on the row, all other rows are…
kirill_igum
  • 3,953
  • 5
  • 47
  • 73
6
votes
2 answers

Adding a EDIT button on the same row of the DetailsLists component in Office-ui-Fabric - ReactJS

I am very new to office ui fabric-react and react in general so don't hesitate to give me pointers if I am doing it totally wrong. Although my requirement is fairly simple, I just can't get it figured out. I have a page with a list view…
Nicolas
  • 2,277
  • 5
  • 36
  • 82
6
votes
4 answers

How to set checked on item in DetailsList control

I use DetailsList component from office-ui-fabric-react library: import {DetailsList} from 'office-ui-fabric-react/lib/DetailsList'; render () { const item = [ {value: 'one'}, {value: 'two'} ] return ( …
Vladimir
  • 145
  • 2
  • 9
5
votes
1 answer

How to use react-testing-library to test combobox component?

I'm trying to write more unit tests for my combobox component, but more specifically, I want to simulate keyboard input into the combobox. I've tried using React's testing library's keyboard events (ex: fireEvent.keyDown) but when I debug after…
sarahkang58
  • 51
  • 1
  • 1
  • 3
1
2 3
…
28 29