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
1
vote
0 answers

How to write parent item in Fluent UI groupedList component?

I am using Fluent UI. I need groupedList component, but there is something I couldn't fix. Parents are always group, but I want to aadd few items as parents just like the picture below. I saw a github issue below, but seems it wasn't fixed. Is there…
Ozan Bilgiç
  • 215
  • 1
  • 9
1
vote
1 answer

Property 'fluent-divider' does not exist on type 'JSX.IntrinsicElements'

import * as React from 'react' import { provideFluentDesignSystem, fluentDivider } from "@fluentui/web-components"; provideFluentDesignSystem() .register( fluentDivider() ); And then I'm…
Raphael10
  • 2,508
  • 7
  • 22
  • 50
1
vote
1 answer

React Fluent UI dropdown disabled tooltip on hover

I have a requirement to add tooltip on hover to disabled options in a dropdown in React fluent UI. I am able to add tooltip to singular component using https://www.npmjs.com/package/@fluentui/react-tooltip …
giorno
  • 65
  • 7
1
vote
1 answer

In Fluent ui 9 react component popover is not showing up

I am using "@fluentui/react-components": "^9.7.1", error: Modalizer i9 must have either aria-label or aria-labelledby I am getting this warning and I have checked there is no error but when I click on the trigger, It shows this warning in the…
Amit
  • 11
  • 1
1
vote
1 answer

I am trying to create a form in React JS using Fluent UI but the thing I noticed is that in the date picker I am missing all the icons

I am trying to create a simple form in React JS using Fluent UI but the thing I noticed is that in the date picker I am missing all the icons when rendered. Here is my code, can anyone help me out what I am missing. import React from "react"; import…
Virat Gehlot
  • 43
  • 4
1
vote
0 answers

Combobox on mobile opens the keyboard even if allowFreeform={false} and autoComplete="off"

After the combobox is clicked the menu doesn't expand, only the keyboard appears, then with a second tap the options are shown. The keyboard is still open and if y try to close it the options also disapears. I have this…
Javier Silva
  • 21
  • 1
1
vote
1 answer

State is false after declaration

I'm currently trying to implement a simple webapp with react and fluent ui. Right now I'm working on a toolbar with a Coachmark. But all that is not important. My function component make use of React.useState and initializes it from a property of…
Romano Zumbé
  • 7,893
  • 4
  • 33
  • 55
1
vote
1 answer

get feedback from the Dialog in Fluent UI React

Having the doc sample here, how should we understand what button was pressed? return ( <>
serge
  • 13,940
  • 35
  • 121
  • 205
1
vote
0 answers

Fluent UI - Open Dropdown's callout programatically

I have a use case where I would like to open the callout of the Dropdown programmatically. I have gone through the documentation but couldn't find an option to do so. I came across one issue on GitHub asking for the same but looks like at that time…
Ashit Vora
  • 2,902
  • 2
  • 27
  • 39
1
vote
2 answers

Is there any good way with FluentUI to have sticky column headers on Detail List?

My goal is to display my details list with Sticky Headers on scroll, and I've run into issues with every solution I've found. The recommended solution of a ScrollablePane wrapping the list, and onRenderDetailsHeader with Sticky components…
jpenfield
  • 11
  • 2
1
vote
2 answers

How to two-way-bind a value in FluentListBox

I am trying to bind a value from a FluentListBox to a variable via the following code: @using Microsoft.Fast.Components.FluentUI; @page "/test" First…
Ascendise
  • 189
  • 1
  • 10
1
vote
1 answer

DefaultList columns header is half hidden in fluentui

I am using fluentui for creating the webapp. I used DefaultList component to show the list of data. But the header of all the columns is half hidden like below All the rows below are being visible correctly. This is the code snippet I am…
Saurav Likhar
  • 31
  • 8
1
vote
0 answers

EXTEND_ESLINT guidance from Fluent UI documentation causes error

I got the following error when I run the npm start command: 'EXTEND_ESLINT' is not recognized as an internal or external command, operable program or batch file I followed the Fluent UI documentation regarding React Integration guidance for…
3-putt
  • 219
  • 1
  • 9
1
vote
1 answer

Icon is not visible in PivotItem in fluent ui

I am creating a view using fluent in react. I used to pivot to display the top navigation but the icon in the tab is not visible even on using the itemIcon property in the PivotItem. This is the code snippet I used return
{ …
Saurav Likhar
  • 31
  • 8
1
vote
2 answers

Why can't I resize the columns of Fluent UI's DetailsList component?

I created a react app with 'npx create-react-app'. I installed the npm package by running 'npm i @fluentui/react'. I implemented the DetailsList component of Fluent UI in my App.js: import "./App.css"; import { DetailsList } from…
Konrad Goldammer
  • 58
  • 5
1 2 3
…
25 26