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

Office UI fabric JS Dropdown component not loading correct style when its click

I am working with Outlook Add-in with Office UI fabric js UI components. I am having issue using dropdown. When click on a drop down it doesn't show the dropdown list style and it opens a complete new panel with options. I followed this link to…
Sandun Tharaka
  • 727
  • 2
  • 9
  • 29
3
votes
2 answers

How to create a password input with fabric ui react?

There is a TextField input in fabric ui, but I have not found a way to create a password field for a login form. Edit: I tried using the 'type' attribute but I get an error. Property 'type' does not exist on type 'IntrinsicAttributes &…
Krisztián Nagy
  • 132
  • 1
  • 10
3
votes
1 answer

Use office-ui-fabric-js inside angularjs

I have made a jsbin with office-ui-fabric-js. Now I would like to add an angular controller around. So I tried this JSBin:
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
3
votes
1 answer

Make the command bar unresponsive

I want to use office-ui-fabric with angularjs, so I am trying to use ng-office-ui-fabric. In the following example, when the wide of the screen is limited, we can observe that the span (eg, 3rd, 14) are hidden. This is not what I want; I want them…
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
3
votes
1 answer

How can I use Font Awesome icons in an Office UI Fabric React icon button component?

I'm using Office Fabric UI in React. I'd like to use Font Awesome icons on an icon button instead of the Fabric ones. Can anyone show me how I'd do this?
dommer
  • 19,610
  • 14
  • 75
  • 137
3
votes
3 answers

CSS oddities with Office UI Fabric libraries

I'm working on a Word 2016 Add-in project and I'm having some difficulties using Office UI Fabric libraries. Basically I would like to give my Add-in the official Office look & feel, so I thought that Office UI Fabric would be the best choice, in…
jeanie77
  • 515
  • 1
  • 4
  • 22
3
votes
1 answer

Include office-ui-fabric styles not from CDN

I have a react project using typescript and the office-ui-fabric. In the simple tutorial, the fabric css is loaded from the CDN. I want to include the css in my webpack bundle. What is the best way to do so? Import the css from the node_modules…
sschoof
  • 1,531
  • 1
  • 17
  • 24
2
votes
0 answers

Excel add ins | office-ui-fabric-react - DetailsList drag drop suddenly stopped working on Office 365 desktop excel add ins

I have created Excel add-ins using office.js, react, office-ui-fabric-react. In one of the requirement used DetailsList from office-ui-fabric-react for drag and drop the list items. DetailsList - Drag drop list items used this component. DetailsList…
2
votes
0 answers

Using UI Fabric Icons - in application that is Azure/MS services dependent, but it is a standalone web application

It is not clear to me if I can use fabricUI icons & Segoe UI font in my project According to this license which can be found in the project repository I have found this StackOverflow question which is linking to this issue in the Fluent…
2
votes
2 answers

How to generate a Fluent UI theme with in the library?

I was creating a react application with Fluent UI - React, I want something like each user can pick a Primary Color, Text Color, and Background Color when they sign up and their app will be in that theme like the same way done in the Theming…
2
votes
0 answers

Fluent UI GroupedList Selection

Playing with FluentUI and trying to make GroupedList working, but I'm stuck and have so many questions about Selection: This is my example: https://codesandbox.io/s/hopeful-chebyshev-n4enr?file=/src/GroupedList.Basic.Example.tsx What I'm trying to…
2
votes
1 answer

Sticky tab bar with Fluent UI's Pivot

I am building a tabbed environment using Fluent UI's Pivot component. Some of the tabs (or PivotItems in Fluent UI parlance) are quite long and need to be scrollable. Is there a way of having the tab bar be sticky such that it stays on top of the…
2
votes
2 answers

How to create a "danger" button in fluentui (office ui fabric)?

How to create a "danger" (red) button in the Microsoft fluentui library? Like one have in other ui frameworks like bootstrap etc. There are and but I have not found anything like ? Alternatively, how do…
Nikolay
  • 10,752
  • 2
  • 23
  • 51
2
votes
1 answer

Push items to fluent ui commandbar component

I am using the fluent UI command bar component. When I try to push additional items to the _items array after the initial render, the command bar adds them as overflow items in the clickable ellipsis at the end of the command bar. If the condition…
ambe5960
  • 1,870
  • 2
  • 19
  • 47
2
votes
1 answer

Navigation in DetailsList not possible with Monaco editor

Hi I'm using the DetailsList and I want to be able to move my selection from column to column using tab. But I came across this issue on Github: https://github.com/microsoft/fluentui/issues/4690 Arrow keys needs to be used to navigate across the…
C1rdec
  • 1,647
  • 1
  • 21
  • 46