Stack Overflow
Stack Overflow

Questions tagged [office-ui-fabric-react]

office-ui-fabric-react (now called Fluent UI) is a component library created by Microsoft for use with React.

109 questions
8
votes
3 answers

FluentUI DetailsList onColumnClick with React Hooks gives empty Items

I am trying to create a DetailsList with sortable columns (similar as the example in the documentation here: https://uifabric.azurewebsites.net/#/controls/web/detailslist), but instead of a Class component I want to use a functional components and…
Joosttk
  • 91
  • 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
5
votes
3 answers

How can I use grid layout with Fluent UI React

After I install @fluentui/react, I try to use grid like this doc https://developer.microsoft.com/en-us/fluentui#/styles/web/layout ReactDOM.render(
Persk
  • 639
  • 2
  • 6
  • 15
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
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
3
votes
1 answer

Is it possible to change a part of text styling of ChoiceGroupOption (office-ui-fabric)?

I am using Office fabric Choice Group for my radio buttons. I would like to change the styling of part of text to bold, but the rest of text remains as normal font size. I am using onRenderField method but I have not successfully implemented yet....…
M.B
  • 37
  • 6
3
votes
2 answers

How to implement Fluent UI DetailsList Drag & Drop row visual indicator

Referencing the drag & drop example, is there a way to display a visual indicator on the row the dropped row will be moved to, prior to the move occurring? This would be similar to the visual indicator shown when reordering the column headers. There…
Alan Mervitz
  • 507
  • 5
  • 15
3
votes
1 answer

@fluentui/react DetailsList with the Column headers always Showing

Any way I can make the Column headers of my @fluentui/react "DetailsList" always show at the top when scrolling down? Is there another @fluentui/react that does it? Thank you
Ofer Gal
  • 707
  • 1
  • 10
  • 32
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…
sagar
  • 464
  • 4
  • 13
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…
Karol Świeca
  • 63
  • 5
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…
Слава Мельников
  • 75
  • 1
  • 7
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…
foobar
  • 153
  • 6
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
2 answers

IColumn in DetailsList: how to set column width at mount

How can you set the columns of a DetailsList to a specific width at mount?k I wanted to save the column widths every time they are saved and restore them when the component remounts, i.e., revisits the view where the list is.
user1763729
  • 167
  • 1
  • 11
1
2 3 4 5 6 7 8