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
3
votes
1 answer

"Cannot find module" when running unit tests on node.js with react as peer dependency in common package

I have following app structure: Application A Application B Common package Now Application A and B have in package.json the common package added: { dependencies: { "commonPackage": "file:../../../commonPackage" } } both apps use React,…
alek kowalczyk
  • 4,896
  • 1
  • 26
  • 55
3
votes
1 answer

Unable to add Office UI Fabric React Components to Existing Project

I attempted to add the Office UI Fabric React Components to an Existing Project. My project is a new ASP.NET Core Web Application created via Visual Studio 2019. This project was created using ASP.NET Core 3.0 (preview 7) via the React.js and Redux…
Some User
  • 5,257
  • 13
  • 51
  • 93
3
votes
2 answers

How to change IconButton color?

How can I change the color of icon in IconButton? The color of icon in the theme (using theme designer) is black however sometimes I need to show a iconbutton in white color. The code below doesn't seem to change the color of icon to white const…
Negin Basiri
  • 1,305
  • 2
  • 26
  • 47
3
votes
4 answers

How can I make an entire row clickable in a DetailsList component? (office-ui-fabric)

I've been using the DetailsList component but haven't found a way to make an entire row clickable - is there a sample code snippet or pointers on how this can be achieved? https://developer.microsoft.com/en-us/fabric#/components/detailslist
Jorge Aguirre
  • 2,787
  • 3
  • 20
  • 27
3
votes
2 answers

Can I specify a separate onClick handler for TextField's icon?

Using component, can I specify a separate onClick handler for a decoration icon? The code below is not working: this.setState({ some new state }) }} …
Andrej Kirejeŭ
  • 5,381
  • 2
  • 26
  • 31
3
votes
1 answer

Function window.alert is not supported

Project: Office Add-In Office-UI-Fabric-JS: 1.5.0 Fabric Core: 5.0.1 I'm getting the error Function window.alert is not supported The 3rd party library I'm using ("DataTables") uses the "alert" API. Is there a way, other than manually modifying…
ezG
  • 391
  • 1
  • 17
3
votes
3 answers

How to render a column header with both text and a tooltip icon in Fabric DetailsList

In a DetailsList, is it possible to render a specific column header with both text and an icon with a tooltip like this: (I tried with onRenderDetailsHeader but I'm not sure how to handle a specific column).
Eric
  • 107
  • 1
  • 6
3
votes
0 answers

NPM package contains node_modules which conflicts with other packages

I am trying to get the latest version of the office-ui-fabric-react npm package to work with the latest version of the vss-web-extension-sdk npm package. global npm packages: +-- typescript@2.9.2 +-- webpack@4.12.0 package.json (dependencies…
myermian
  • 31,823
  • 24
  • 123
  • 215
3
votes
1 answer

How do I dyamically update the dialog displayed by displayDialogAsync?

My code contains the following markup
ezG
  • 391
  • 1
  • 17
3
votes
1 answer

Show Spinner at the center of UI

How will show a spinner at the center of the page and all the contents in the page gets blurred while showing the spinner?
user989988
  • 3,006
  • 7
  • 44
  • 91
3
votes
2 answers

How we can close the error messagebar of office react fabric component?

I am trying to use fabric react messageBar component in my application but i am not able to close(dismiss) the message section even i clicked on close icon in the messageBar component. Please find the below code for reference. import React from…
Nagaraju
  • 113
  • 1
  • 7
3
votes
3 answers

Set max width for Office UI Fabric TextField

How do I set max width for a TextField? By default, the width is set to maximum size
user989988
  • 3,006
  • 7
  • 44
  • 91
3
votes
1 answer

How to set dialogDefaultMaxWidth in Office UI Fabric React?

The dialog component of Fabric has dialogDefaultMaxWidth set to '340px' by default according to its docs. I want to change it to '640px' but I'm not sure how to do that. The docs are explaining everything using Typescript so I'm getting a little…
UtkarshPramodGupta
  • 7,486
  • 7
  • 30
  • 54
3
votes
1 answer

Cannot trigger 'onChanged' delegate with Office UI Fabric Dropdown inside a Jest/Enzyme tests

I need to unit test a callback provided to 'onChanged' event in an office-ui-fabric Dropdown (with spyOn and expect(callback).toHaveBeenCalled()). The problem is that I don't know how to trigger this event? I tried to look at the DOM but there are…
Eric
  • 107
  • 1
  • 6
3
votes
2 answers

Office UI Fabric React TagPicker new item

Summary Does anyone know how to have the UI Fabric React TagPicker add a new item when whatever's typed in doesn't exist in the suggestions? I'm going to want to send off an AJAX request to a service to add the new item in the backend, too. Desired…
James Love
  • 1,025
  • 9
  • 16