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

Is it possible to have horizontal stack with 2 stack items of same width?

I am trying to create a form with 2 controls inside a horizontal stack but I can't figure how to make stack use 100% of the width
0
votes
1 answer

How to not leave button in selected state after click - fluent-ui (office ui fabric)

Using DefaultButton currently. This remains selected when clicked, which property can be used to revoke selection once clicked. Alternatively, is there any styling that needs to be done for selection?
0
votes
1 answer

How to set font color of ToolTip in fluent-ui

Not able to set font color of ToolTipHost in fluent-ui, I tried below code but it is not working.
0
votes
2 answers

Getting an error saving date value in a SharePoint List using Office UI fabric - React JS

It's my first time trying out office ui fabric react JS to develop a web part app in SharePoint online. For a test (CRUD application) project, I have developed an online book library application. I have been struggling to save / get a date value…
0
votes
1 answer

fluentui/react ContexualMenu items styling

Im trying to style fluentui/react ContextualMenu component. So far i've been able to achieve the look I want by recursively modifying IContextualMenuProps items prop - define styles for each IContextualMenuItem and repeating process for each submenu…
m aksem
  • 553
  • 1
  • 5
  • 13
0
votes
1 answer

React Fabric Ui Panel can't close

I have an Sharepoint app. By clicking on a command list button I open a panel. But when I try to close the panel I get a error saying that my _renderPanelComponent function is not a function and when trying to log it from _dismissPanel() it I get…
Carl Decks
  • 385
  • 4
  • 15
0
votes
1 answer

Add class and id to React Fabric UI pivot item headerButtonProps

I can't seem to get a className or id to render with the tab button link via the headerButtonProps in the PivotItem. I think this should be possible since version 7.114.0 added IButtonProps for the pivot button.. am I missing something obvious? My…
0
votes
2 answers

Office Ui Fabric Dropdown doesn't expand to its content

I am using Office UI Fabric React that comes with SPFx. It's version 6.214.0. I have a dropdown that looks like this: setPosition(option.text)}…
0
votes
1 answer

Office UI Fabric theming

I want to use the body text color in my web part, so if the theme is black, it would display text in white, if the background is white, it'd display it in black. Currently I am referencing this in my .scss file: @import…
0
votes
0 answers

calling loadTheme from a .ts file

I one of my "office-ui-fabric-react" project, I am writing a utility class(common.ts) where I have a function to load theme for a page. This utility class will be included as part of the script tag in an html file as common.js. I want to call…
0
votes
0 answers

Display data in two columns with UI Fabric React

I would like to display data dynamically in 2 columns with UI Fabric React. For example I want to have 2 columns one for teachers and one for students, and each time I want to add an entry to one of these columns dynamically with code. These 2…
0
votes
1 answer

Apply colors to labels with specific sizes - FluentUI

I am reading through the docs for UI Fabric React, and I can see that we have these classes to apply font sizes to our labels: https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-typography .. I liked the size of the "Subtitle" and…
0
votes
1 answer

How to set dynamic options from API response in fluent ui react Dropdown control?

I have encountered a situation where I need to display a Dropdown and want the options to dynamically fetch from an API and load on clicking the caret (maybe show a loader by the time the API response comes through). The experience I am looking for…
0
votes
1 answer

Change the exit button style on Fluent UI's Panel

I'm using Panel from 'office-ui-fabric-react/lib/Panel' in React. This Panel generates a little [x] button on the upper right hand corner. It is very hard to see, is there any way to change its default background color to red & modify its mouse…
Raven
  • 529
  • 7
  • 27
0
votes
1 answer

How to change the width of NormalPeoplePicker dropdown

I'm using default example of NormalPeoplePicker from https://developer.microsoft.com/en-us/fluentui#/controls/web/peoplepicker#IPeoplePickerProps. When the dropdown displays it cuts off longer items (example: 'Anny Lundqvist, Junior Manager of…
Marek
  • 3
  • 3