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

Changing the row height of DetailsList

How can I change the row height for a DetailsList row? I can make the row compact by setting the parameter true? Can I reduce the height further, like a table row? I tried to modify maxHeight in IDetailsRowStyle cell. But it still gives the same…
Dona
  • 143
  • 2
  • 8
5
votes
2 answers

When item added, DetailsList doesn't update

I'm using office-ui-fabric-react library. Current version that I'm on is 7.17.0. My list is super simple:
Mavi Domates
  • 4,262
  • 2
  • 26
  • 45
5
votes
2 answers

Office-ui-fabric-core some icons are not showing

I am building office addins for Project. It is really weird that even though I am using proper icon names some icons are not showing Followed everything from the official documentation…
Ragavan Rajan
  • 4,171
  • 1
  • 25
  • 43
5
votes
1 answer

How to conditionally change a color of a row in detailslist?

I'm looking at customitemrows but there isn't much documentation. I have a table and if a row was created by a current user, I want to change the color from black to grey. I can do that with style. I understand how to conditionally change color in…
kirill_igum
  • 3,953
  • 5
  • 47
  • 73
5
votes
1 answer

How to customize the header in GroupedList component in react ui-fabric library

I have problems customizing the GroupedList component header in the react ui-fabric library. What i would like to do is to remove the checkbox and the number count (including paranthesis). When the (grey) row is clicked, behaviour should be…
Flimzy_Programmer
  • 515
  • 5
  • 16
4
votes
1 answer

Is there a way to make a DetailsList header text wrap in Fluent UI?

I have a situation in which I want to display data in a FluentUI DetailsList, where column names can be very long, while the column content can be very narrow. In such a case, the header will be truncated. See this codepen. Is there any way to…
Bujar Murati
  • 43
  • 1
  • 3
4
votes
1 answer

How to remove or handle icons were reregistered warning in react?

warning- react_devtools_backend.js:2273 Some icons were re-registered. Applications should only call registerIcons for any given icon once. Redefining what an icon is may have unintended consequences. Duplicates include: GlobalNavButton,…
Sarfraj Ansari
  • 119
  • 2
  • 11
4
votes
0 answers

React Fluent UI Theming

I´m currently developing an App for MS Teams. After getting used to the MS UI library (now it´s called fluent-ui) everything is starting to get assembled together. Since I want to provide my users a "built-in" expirience, I want to use the native…
Black Bird
  • 41
  • 1
  • 4
4
votes
1 answer

How to get selected value on Dropdown component in office-ui-fabric-react?

I am trying to use office-ui-fabric-react with my project. But I stucked when controlling select input. I want to get selected item's value on OnChange event. But there's no value on event.target. This seems div so it has only textContent. Am I have…
ton1
  • 7,238
  • 18
  • 71
  • 126
4
votes
2 answers

Office UI Fabric React Icons not showing with Gatsby

I'm trying to get Icons working with Gatsby but it they don't seem to be showing in the production build. I am importing the icons like this import { initializeIcons } from "office-ui-fabric-react" and calling the function like…
tjackadams
  • 815
  • 2
  • 9
  • 26
4
votes
0 answers

Using Office UI Fabric React components in ScriptLab

In a simple Test Web App I was able to create a UI Fabric React output by using imports like this: import React from 'react'; import ReactDOM from 'react-dom'; import { DefaultButton } from 'office-ui-fabric-react'; and rendering in…
Maarten van Stam
  • 1,901
  • 1
  • 11
  • 16
4
votes
1 answer

How to replace the checkbox from the UI Fabric DetailsList component

How can I replace the circle checkbox of a DetailsList in office-ui-fabric-react with a normal square CheckBox component? I see onRenderCheckbox so I try something like this: onRenderCheckbox={(props) => (
JFCOU
  • 43
  • 1
  • 3
4
votes
2 answers

How to get the current theme in a spfx webpart using the new ts based styling approach

We are developing modern webparts for O365 Communication Sites using Office UI Fabric React. I want to use the new ts-based approach to styling my components(see here). Everything works quite well, except that it's not using the current theme of…
dominikk
  • 356
  • 3
  • 11
4
votes
3 answers

Can Office Fabric DetailsList column headers be styled?

I was looking through the office fabric documentation, there seems to be clear information on how to style the items/content inside the DetailsList (https://developer.microsoft.com/en-us/fabric#/components/detailslist/customitemcolumns has an…
Stanley
  • 125
  • 3
  • 11
4
votes
1 answer

Office UI Fabric - How to apply css styles to existing components

I'm using the provided components and every time I need to change a component style I wonder what's the proper way to do it. Lets say I need to change the IconButton background color when it's disabled. https://codepen.io/elsl/pen/KrQQdV If I…
Eduardo
  • 73
  • 1
  • 4
1
2
3
…
28 29