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

How do you apply a style to icon of type IIconProps in Fluid UI?

I have button like the sample below with an icon (addFriendIcon). https://developer.microsoft.com/en-us/fluentui#/controls/web/button How do I add a style to this icon? For example change the color? import * as React from 'react'; import {…
EvilEddie
  • 1,026
  • 2
  • 12
  • 23
2
votes
2 answers

Official documentation and examples of Office UI Fabric / Fluent UI React Charts?

First please bear with me. I do not think that this question is appropriate for Stack Overflow. I first tried to ask this question in the official GitHub repository of this project, but they strongly suggest to ask question in Stack Overflow with…
Narvalex
  • 1,824
  • 2
  • 18
  • 27
2
votes
1 answer

Office Fluent UI / Fabric UI Modal - how can I close it from the body component?

I'm using the Modal component from the fluent-ui-react https://developer.microsoft.com/en-us/fluentui#/controls/web/modal like this: function ModalExtended(props) { const [isModalOpen, { setTrue: showModal, setFalse: hideModal }] = useBoolean( …
Birtija
  • 87
  • 3
  • 10
2
votes
3 answers

How to customize the column title style in Details list

How can I change the font size and padding of the title cell in details list. I am using onRenderDetailsHeader prop to customize header render. private renderDetailsHeader = (detailsHeaderProps: IDetailsHeaderProps) => { return ( …
LJP
  • 1,811
  • 4
  • 23
  • 34
2
votes
2 answers

Override margin in Separator Component of Fluent UI using React

I'm trying to override the margin attribute of a Separator component using Microsoft's Fluent UI using React. The top-margin appears to default to 15px and I would like it to be less than that. Here's a screenshot: The beige color section above…
risingTide
  • 1,754
  • 7
  • 31
  • 60
2
votes
3 answers

Component export errors using '@fluentui/react', but works with 'office-ui-fabric-react'

Trying to get started with Microsoft's Fluent UI, but for some reason I'm getting errors that every component is not exported from the library. Following the "Get Started" npx create-react-app my-app cd my-app npm install…
wsfuller
  • 1,810
  • 8
  • 31
  • 49
2
votes
1 answer

Table implementation in Office UI Fabric React?

I am looking for a Table component in office-ui-fabric-react that I could use in my custom WebPart to display some data coming from an API and that could easily be exported to an Excel sheet if the user wants to do that. I don't see any table…
nemkin
  • 95
  • 2
  • 9
1
vote
1 answer

How To Customize Dropdown Items to use Theme Color in SPFx WebPart

I want to give my dropdown items to use the text themeColor. How can I achieve this? Below is my code: const dropdownStyles: Partial = { dropdown: { width: "50%" }, dropdownItem: { backgroundColor:"$themePrimary", …
Joy
  • 105
  • 1
  • 2
  • 10
1
vote
1 answer

How do I divide the Office UI Fabric ChoiceGroup into 2 rows and 5 columns?

I am new to UI, and currently working on making on creating options using Fluent UI ChoiceGroup. I have 10 entries, let's say 0,1,2,3,4,5,6,7,8,9. I am trying to force UI to always show like 0 1 2 3 4 5 6 7 8 9 but it changes according to…
MasterMaddy
  • 23
  • 3
1
vote
1 answer

Fluid UI react - Top nav bar best practice

Looking through the components, there isn't a top navigation in horizontal format. I supposed it could be built from the components offered but I'm looking for best practice. Is there a sample or doc from Fluid UI that discusses this common…
DFBerry
  • 1,818
  • 1
  • 19
  • 37
1
vote
1 answer

Is it possible to adjust width on date picker control in React office UI fabric

Having issues using the DatePicker control and fixing width for my SPFX app. The default width is 100%. I want it to be the same width as my text input, which I pass in a 700px width property into the styles parameter. There is no width or styles…
longieng-myo
  • 41
  • 3
1
vote
1 answer

How to register custom icons by reading a SVG file from path?

I am building an application making use of @fluentui/react (version 8.34.7) and I am using create-react-app. One of the things I would like to do is register custom icons which are in SVG format. Following the example here, I came up with the…
Gaurav Mantri
  • 128,066
  • 12
  • 206
  • 241
1
vote
1 answer

Hide a Column in fluent-UI Detailslist

How do one hide/prevent a column from rendering in fluent-UI DetailsList component.
Abhisheik-Athi
  • 11
  • 2
1
vote
1 answer

Other way to share react ts components between projects

I have been looking for a way to mostly share some code between projects specifically for SPFX and fluent ui. We found 3 main ways to do that. 1. Creating a component library is the way that seemed least complicated cause it uses the same…
Ricardo Silva
  • 1,221
  • 9
  • 19
1
vote
1 answer

Accessibility Issue - When page is resized to 400% zoom mode, controls are not visible/get truncated

I have a SharePoint Page with three of the following controls displayed horizontally as follows: css is as follows: .main { display: flex; flex-direction: row; justify-content: flex-start; .searchText { width: 100%; max-width:…
user989988
  • 3,006
  • 7
  • 44
  • 91
1
2
3 4 5 6 7 8