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

Office UI Fabric React : Dropdown Component

How to change the CSS of label for Dropdown? Markup is as below:
404
  • 249
  • 6
  • 16
0
votes
3 answers

office-ui-fabric-react / TextField input properties alternative to onChanged

I'm currently using the TextField from office UI fabric and using the onChanged property to assign my prop in react the value being entered similar to their GitHub example. However, the event handler is called for each element being entered. How can…
sam
  • 1
  • 1
  • 1
0
votes
2 answers

Button in li element to display more details

I would like to display the modal window with more details when I click on record. I'm using OfficeUI. My parent component: public render() { { return (
{this.props.items .map((item:…
J Oderberg
  • 75
  • 2
  • 6
0
votes
1 answer

Adding Office UI Fabric react components to Office Add-in web project in visual studio

I am aware that we can use Yo-man and VS template to create office add-in. Yo-man provide more options on building package depending on the framework we select. I am wondering if we can add Office UI fabric react components to the web project of…
0
votes
1 answer

Display a message when a multiselect dropdown in office ui fabric is collapsed

Is there a way to know when a multiselect dropdown is collapsed? I have a multiselect dropdown as show here: On unselecting all options, the dropdown still remains expanded as shown in the above image. On clicking somewhere else in the screen…
user989988
  • 3,006
  • 7
  • 44
  • 91
0
votes
1 answer

Office Fabric UI React - HoverCard width

I use HoverCard Office Fabric UI React component to show preview of images, although I can configure height of the card I don't see similar properties for width. What is a possible solution to set width? I saw property styles?: IHoverCardStyles but…
Sergey Aslanov
  • 663
  • 1
  • 7
  • 13
0
votes
1 answer

Spinner on clicking an item in DetailsList

How do I show a spinner in a DetailsList? For instance, let's say I have the following items in a DetailsList: list of items On clicking the item with the name 'AdipiscingUt.onetoc', show a spinner on the rightmost side of that item (next to 125…
user989988
  • 3,006
  • 7
  • 44
  • 91
0
votes
1 answer

allowTextInput not working in office UI Fabric Datepicker

I have created a date picker with Office-ui-fabric-react. I have enabled the "allowTextInput" property. I can able to edit the text input in Chrome, but its not working in IE 11. Observed behavior: Chrome: Working fine in both Keyboard Navigation…
Naveen Prasath
  • 539
  • 1
  • 3
  • 23
0
votes
1 answer

ResponsiveMode is undefined in Jest test using lib-common-js

I'm trying to write tests for my Office Fabric React, initially started using react-scripts-ts, now ejected since I ran into this issue, and I'm running into the following error when using the withResponsiveMode library: TypeError: Cannot read…
vellian
  • 11
  • 2
0
votes
1 answer

Importing fabric js components in angular 4 project

I have tried to install fabric-js components in my angular 4 project using the commands npm install ng office-ui-fabric --save provided in the link https://github.com/ngOfficeUIFabric/ng-officeuifabric#installation I have followed all…
Shankar
  • 2,565
  • 8
  • 29
  • 56
0
votes
2 answers

Is it possible to have initials show before image loads?

I'm using Persona component and sometimes it takes time for the image to load. Is it possible to show the user initials until the image loads? This exact behavior is in place in OWA.
dagoltz
  • 62
  • 7
0
votes
1 answer

display selected options in render() method in React

I am learning React and I am trying to achieve the following: I am using Dropdown list which allows a user to select multiple items. Then I am trying to add each selected option in an array. Then I am tying to display the selected items (options) in…
Burre Ifort
  • 653
  • 3
  • 15
  • 30
0
votes
1 answer

How to fix the list of items of the Dropdown Component in a specific div?

I am using the component Dropdown, when I click on the icon I have the list of options, it is a div ms-layer which is add just before the end of body and it is remove when I click on the Dropdown to hide the list of options. What I want to do, it's…
kone
  • 21
  • 3
0
votes
1 answer

How to add data- attributes in Checkbox component via inputProps

I use Fabric components written in React + Typescript and when using Checkbox component I can add custom attributes such as data-id and so on - this is written also on documentation:…
0
votes
1 answer

How to get search box in `CommandBar` after update to Fabric 6

I've updated Fabric to version 6.6.1 and noticed that property isSearchBoxVisible is missing in CommandBar component. How to substitute it? I widely use it in my app.
micnyk
  • 726
  • 8
  • 27