Questions tagged [fluentui-react]

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

Fluent UI react or web represents a collection of utilities, React components, and web components for building web applications. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior.

Home: https://developer.microsoft.com/en-us/fluentui#/ Source: https://github.com/microsoft/fluent-ui-react

311 questions
0
votes
0 answers

Styling TextBoxes in FluentUI

I am creating a dashboard in react with FLuentUI. I have a row of textBoxes and they are just not lining up - as you can see. Can someone give me a starter please on how to line these up : As you can see the 'Enter text here is not straight with…
Jason_Hough
  • 392
  • 5
  • 31
0
votes
0 answers

Fluent UI 'Message' Icon strange behavior

I am developing an SPFx webpart and want to add a Message icon: https://developer.microsoft.com/en-us/fluentui#/styles/web/icons#available-icons However, it always shows below…
10120
  • 95
  • 8
0
votes
0 answers

Filtering menu items inside the Fluent UI command bar causes the command bar to re-render and close the menu

I'm trying to add a custom menu with a search box to filter menu items to a command bar. and as soon as I change the menu items the command bar re-renders and ends up closing the menu. Is there to programmatically open a command bar menu? CommandBar…
0
votes
1 answer

FluentUI Grouped List not rendering

I'm new to react and fluentui development and am having trouble getting the Grouped List examples to work https://developer.microsoft.com/en-us/fluentui#/controls/web/groupedlist Nothing renders until I remove the SelectionZone element. But then I…
Matt Fitzmaurice
  • 1,319
  • 4
  • 19
  • 40
0
votes
1 answer

Change the color of asterisk symbol for required Input Fields and FormDropdown in Fluent UI Components

I am using FluentUI components for developing Teams App. And have a form where I need to mark some Input and FormDropdown fields as required. On adding required flag, the required fields sign (*) comes up beside the field label in default i.e black…
Naina
  • 63
  • 6
0
votes
1 answer

How to place stack item at custom position in horizontal alignment in fluent ui

I want to place one stack item to the end and two stack items to the start in horizontally aligned stacks. I want to move the stack with the x icon to be at the end. This is the code snippet I used
0
votes
1 answer

How to group items in a DetailsList using Fluent UI

I'm attempting to group items in a DetailsList using Fluent UI controls. The example they give is this for the grouping: const groups = [ { key: 'groupred0', name: 'Color: "red"', startIndex: 0, count: 2, level: 0 }, { key:…
NightTom
  • 418
  • 15
  • 37
0
votes
0 answers

chip component in fluentui/react

In material-ui there is this component called Chip. Is there a similar component in fluentui/react?
Burre Ifort
  • 653
  • 3
  • 15
  • 30
0
votes
1 answer

Is it possible to queue function calls in react?

I'm having a page with a textbox on (Textfield from fluent UI). I want to update a server stored value every time the user changes the text. I do not want the user to click a separate 'Save' button since that will interfer with the workflow on the…
Joakim
  • 114
  • 1
  • 7
0
votes
2 answers

How to populate dropdown options dynamically using a promise

import { getCustomer } from './Customers'; let optionItems=[]; export const LOV: React.FunctionComponent = () => { const loadCustomer = async () => { const data = await getCustomer(); for (var i=0; i < data.value.length ; ++i) { …
0
votes
1 answer

Using ComponentStyles using @fluentui/react-northstar

I am trying to give all the s in my project a border radius. From reading the docs it seems the best way to do this is the componentStyles in a custom theme. I have imported teamsTheme from northstar, created a custom theme, adding a…
Ghojzilla
  • 311
  • 1
  • 14
0
votes
0 answers

How to display hierarchical data structure with selectable Fluent UI DetailsList?

I have a nested data structure that looks like the following snippet: [ { id: "item1", children: [ { id: "item1child1", children: [] }, { id: "item1child2", children: [] } ] }, …
wahoowa
  • 358
  • 1
  • 10
0
votes
1 answer

Fluent UI style not working in passed commands with buttons to CommandBar

i am using Fluent UI in my project. I dont know how to change hoover style in CommandBar. I initializing my buttons with this simple code in javascript: // inside `buttons` array key: 'newfolder', text: 'New Folder', iconProps: { iconName:…
michasaucer
  • 4,562
  • 9
  • 40
  • 91
0
votes
1 answer

How to change Fluent UI icon color on mouse hover?

i am using Fluent UI in my project. I initializing my button with this simple code in javascript: iconProps: { iconName: 'NewFolder', styles: { root: { color: 'orange' }, } }, and i can…
michasaucer
  • 4,562
  • 9
  • 40
  • 91
0
votes
0 answers

FluentUI TextField onchange does not fire errormessage

So I've been working with FluentUI and I've setup a TextField with a onError Property which fires but it only fires when starting the app up. When changing the value the error does not fire again. I've followed the FluentUI docs but I cannot…