Stack Overflow
Stack Overflow

Questions tagged [fluent-ui]

Fluent UI is set of cross platform UI libraries from Microsoft. A collection of UX frameworks for creating beautiful, cross-platform apps that share code, design, and interaction behavior. Build for one platform or for all. Everything you need is here. Components for React, Web Components (Typescript and Blazor), Windows, iOS, Android, macOS and Cross-platform

Fluent UI is a collection of UX frameworks for creating, cross-platform apps that share code, design, and interaction behavior.

Build for one platform or for all. Everything you need is here.

Components for React, Web Components (Typescript and Blazor), Windows, iOS, Android, macOS and Cross-platform

386 questions
4
votes
1 answer

React with Fluent UI Form onChange not working (very simple code)

I am using React with FluentUI to build a simple form, code is following import React, { useState, FormEvent } from "react"; import { PrimaryButton } from "office-ui-fabric-react/lib/Button"; import { IUserFormValues } from…
Leslie Gao
  • 143
  • 2
  • 12
4
votes
1 answer

Dropdown menu with item IDs in FluentUI/react-northstar

I am currently trying to make a dropdown with help of the FluentUI/react-northstar Dropdown component. Unfortunately the items prop for this component only has a string[] for the rendered names in the dropdown, but I need a key as well. I tried to…
IngoH
  • 159
  • 7
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
3
votes
1 answer

Unhandled exception rendering component: The requested icon (ArrowCircleLeft, Size20, Regular) is not available in the collection

I'm studing Fluent UI Blazor component of Blazor WebAssembly App. The browser throws the following error: crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] Unhandled exception rendering component: The…
star akvo
  • 31
  • 1
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
2
votes
1 answer

Prevent contextmenu on details list group headers in fluentui

I have a details list
Audrius Šaučiūnas
  • 89
  • 1
  • 5
2
votes
2 answers

fluent UI fluent-text-field skips some text when user writes

Im using Fluent UI web component in my Blazor Server Side project, and when the user types a text into a fluent-text-field, some of the written text is skipped, is there a fix for it or I should just change all my fluent-text-fields? an example can…
AIDEN IV
  • 79
  • 1
  • 9
2
votes
0 answers

TypeScript for defaultRender on FluentUI

I use Fluent UI. I have a DetailsList component, and I used ScrollablePane to make the Header always on the top. After I used ScrollablePane, I had typescript error. I couldn't find any proper solutions to fix it. Is there a way to fix…
Ozan Bilgiç
  • 215
  • 1
  • 9
2
votes
0 answers

How to pass parameter to makeStyles in @fluentui/react-components

I am trying Fluent UI React V9, and try to pass the color style from function component to makeStyles. Here is my codesandbox: import { Button, ButtonProps, makeStyles } from "@fluentui/react-components"; import * as React from 'react'; const…
Edward
  • 28,296
  • 11
  • 76
  • 121
2
votes
1 answer

Cannot provide a value for property 'IconService' on type 'Microsoft.Fast.Components.FluentUI.FluentIcon'

I'm receiving the following error in browser: Cannot provide a value for property 'IconService' on type 'Microsoft.Fast.Components.FluentUI.FluentIcon'. There is no registered service of type…
Ogglas
  • 62,132
  • 37
  • 328
  • 418
2
votes
1 answer

How to resolve this TypeScript lint error?

I am implementing Fluent UI in Next.js according to the documentation on this page. The problem is that when I try to build the application, it returns the following errors: Type '{ children: Element; renderer: any; }' is not assignable to type…
Hermes
  • 21
  • 3
2
votes
1 answer

Getting selection from Fluent UI dropdown in React project

I am printing to the console a user selection from a Fluent UI dropdown. The only challenge I'm running into is grabbing the actual selection. I don't see how FLUENT is handling that, as it's not mentioned in their documentation. My code looks like…
Muirik
  • 6,049
  • 7
  • 58
  • 116
2
votes
0 answers

I need to give customise style to Nav bar in Fluent UI

I working with fluent UI with react js. I want to create a left-sidebar and header section but am unable to find the proper solution I have done the below code but not getting a solution. Below is my react fluent ui code example what i missing to…
Pratik Patel
  • 221
  • 1
  • 10
2
votes
1 answer

How to disable this icon

import * as React from 'react'; import { IContextualMenuProps, IIconProps, Stack, IStackStyles } from '@fluentui/react'; import { CommandBarButton } from '@fluentui/react/lib/Button'; export interface IButtonExampleProps { // These are set based…
kartikay dwivedi
  • 81
  • 4
1
2
3
…
25 26