Stack Overflow
Stack Overflow

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
1
vote
1 answer

Nested components & styles in fluent ui v9 / Griffel

I have a style for a standard list export const useOverrides = makeStyles({ list: { ...shorthands.padding("2px", "4px", "8px", "30px"), }, I add it to the list
  • item1
  • item1
    • …
TommyD
  • 913
  • 3
  • 17
  • 32
1
vote
3 answers

Make a panel under a button that overlays another element

I have an editor and several buttons above it on the right. I would like to have a panel just under Button2 that overlays the editor. Then, clicking on Button2 will expand and collapse the panel (which will be easy to implement). I have written the…
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
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

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
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
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
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
vote
1 answer

fluent ui - In details list there is loss of selection state if state is modified inside Selection onSelectionChange callback

While using fluent UI's details list, I am setting both setKey and getKey while overriding the on selection changed method. But on the double of the row or on Item Changed, the correct selected row item is not passed. Please advise. Edited: I went…
Rose
  • 13
  • 4
1
vote
0 answers

Fluent-UI's dropdown and combobox both not working

I have a React app with Fluent-UI 8 set up using npm install @fluentui/react according to the documents from Microsoft. When I try their combobox or dropdown components, the dropdown list doesn't appear when clicked on it. I use their examples from…
CMorgan
  • 645
  • 2
  • 11
  • 33
1
vote
1 answer

Displaying multiple validations for FluentUI TextField component

Example Validations Display So I'm converting an old Knockout blade to react, and I need to add multiple validations to a FluentUI TextField component. The example picture is what these validations should look like, but as of now, I have not been…
dosorno2619
  • 15
  • 5
1 2 3
…
20 21