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
4
votes
3 answers

Prevent page reload when rendering ui fabric react nav component

I'm stuck trying to get the ui-fabric Nav component working with react-router-dom v4+. My solution "works", but the whole page is rerendered instead of just the NavSelection component. After some research i realize i need to do a e.preventDefault()…
Flimzy_Programmer
  • 515
  • 5
  • 16
4
votes
2 answers

Styling Microsoft fabric-react components

I've started a Microsoft fabric-react, using the Typescript-React-Started provided by Microsoft here. Although the excellent Fabric-react documentation available here, i wasn't able to find any documentation on how to style the fabric-react…
VSOS
  • 452
  • 5
  • 17
4
votes
1 answer

MS Fabric DetailList with input box tabIndex always renders to -1

I am adding a input box to a column in a Microsoft Fabric DeatialsList. I set it in the onRender of the IColumn definition. All works fine except the tabIndex is alway -1. I would like to set it to 0. export default class Scrach extends…
Mark
  • 803
  • 3
  • 11
  • 21
4
votes
3 answers

Office UI Fabric React - DetailsList Columns's width

How to configure columns in DetailsList component so that they align themselves to fit content?
Sergey Aslanov
  • 663
  • 1
  • 7
  • 13
4
votes
2 answers

React: how to navigation without refresh page using office UI fabric

I'm using Office UI Fabric to create app with different views. navbar.js: import React, { Component } from 'react'; import { Nav } from 'office-ui-fabric-react/lib/Nav'; export default class NavBar extends Component { render() { return ( …
Jie Hu
  • 539
  • 1
  • 5
  • 16
4
votes
1 answer

SyntaxError: export declarations may only appear at top level of a module when trying to import office-ui-fabric in a Gatsbyjs blog

I'm trying to add OfficeUI fabric components in a blog build using gatsby js. As soon as I'm importing any component, the site stop to works. Using develop command, I can see in the browser console : SyntaxError: export declarations may only appear…
Steve B
  • 36,818
  • 21
  • 101
  • 174
4
votes
0 answers

Office UI Fabric JS DropDown not working in IE11

I've got a SharePoint Add-In with two drop downs:
…
Z White
  • 41
  • 1
  • 5
4
votes
1 answer

How to focus a button in a details list using React and Office Fabric

Anyone have suggestions on how to focus a button in react DetailsList? Refs seem like the way to go, and I'd like to do something like this: findDOMNode(this.refs.mybutton).focus() But I haven't been able to get a ref…
Lars
  • 9,976
  • 4
  • 34
  • 40
4
votes
3 answers

How to create a controlled Fabric UI TextField component?

I've been trying to code a controlled TextField component in the standard way just like in React docs: handleChange(event) { this.setState({ text: event.target.value }); }
Krisztián Nagy
  • 132
  • 1
  • 10
3
votes
0 answers

How to obtain ref of Stack

Stack doesn't expose either componentRef or ref property. How can we obtain react ref to it? In my scenario, I want to use it with useResponsiveMode. A workaround is to wrap Stack with a parent div.
qxg
  • 6,955
  • 1
  • 28
  • 36
3
votes
0 answers

Fix width to 50/50 in a splitpane made from FluentUI Stack component

I am using a stack component to make a split pane. I wanted to make it such that left side has 50% screen space and right side has the remaining 50%. However the problem is that the 2 panes are not equal width from beginning, and as text is added to…
Michael Hansen
  • 237
  • 2
  • 8
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

Highlight the selected item of a navigation pane

Referring to the example "Nav with nested links" under https://developer.microsoft.com/en-us/fabric#/controls/web/nav , On click of a nav item, I want to highlight this item. I have set url as ' ' so that clicking on an item doesn't do anything.…
Putta
  • 67
  • 7
3
votes
1 answer

Can't update value of Office Fabric UI TextField in Enzyme test

I have a React component that uses TextField from office-ui-fabric-react . I'm using Enzyme/Jest to write unit tests. I'm having trouble updating the value of the TextField. I've tried used .simulate('change', { target: { value: 'Input Value'}…
John Pham
  • 183
  • 2
  • 2
  • 6
1 2
3
…
28 29