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

Change Styles to FluentUI Progress Component in Blazor

I am trying to remove the track from the FluentUI Progress bar. I am only able to use this library so requesting an alternate is not an option. I have attempted to add css to my application to overwrite, but I believe that any changes I make to the…
jcridd
  • 65
  • 8
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…
1
vote
1 answer

Create Flow Charts in React js using Fluent UI

I want to create a flow chart with buttons in react js using Fluent UI. However, I am not getting anything in Fluent UI in the context of Flow Charts. Can anyone help me with this? Below is how I wish to make my chart.
Sharique Khan
  • 162
  • 2
  • 12
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
0 answers

React state value is not retained when value is set using useState within useEffect with dep []

I am using Fluent UI Details List and trying to make row editable on icon click. My code is as below. On first run, it shows grid with empty data. Then it goes to useEffect (I tried both useEffect and useLayoutEffect, same behaviour) and data is…
Sagar
  • 137
  • 1
  • 12
1
vote
1 answer

How to use Grid and Segment in @fluentui/react-northstar without borders or Horizontal lines?

This is my code import { Grid, Segment } from "@fluentui/react-northstar"; Usage:
1
vote
1 answer

How can I change the color of the Fluent-React UI's command bar?

This is my code. And I want to change the background color maintaining the hovering effect. How can I do that?
Intern
  • 51
  • 7
1
vote
2 answers

FluentUI dropdown not working in create-react-app

I created a create-react-app project on my machine. I ran npm i @fluentui/react in my project directory terminal to install the fluent ui package. I have simple code to display a dropdown, with all the correct imports import { Dropdown,…
Cameron
  • 185
  • 2
  • 11
1
vote
1 answer

React - Fluent UI DetailsList onRenderDetailsHeader

I am currently running DetailsList in Fluent UI like this: this is with headers export function OperationsTable(this: any) { return (
1
vote
0 answers

Fluent UI and ReactDOM.createPortal bug

I'm currently working with Fluent UI to create a web app, and in this app I'm attempting to create a Fluent UI Dialog with a custom component that contains a Fluent UI ComboBox inside of it. I'm calling ReactDOM.createPortal on return from the…
murky123
  • 120
  • 6
1
vote
1 answer

How do I divide the Office UI Fabric ChoiceGroup into 2 rows and 5 columns?

I am new to UI, and currently working on making on creating options using Fluent UI ChoiceGroup. I have 10 entries, let's say 0,1,2,3,4,5,6,7,8,9. I am trying to force UI to always show like 0 1 2 3 4 5 6 7 8 9 but it changes according to…
1
vote
0 answers

How to use docusaurus with Fluent UI?

I am now working on Docusaurus (which is a static site generator) with Fluent UI, and I don't know how to setup SSR for Fluent UI, there's no any useful information on Internet. What I've known: Fluent UI use a lib called merge-styles to achieve its…
1
vote
1 answer

Upon function execution, react states get reset for no reason

All the following code is in a function react component (using FluentUI) with the following state - const [columns, setColumns] = React.useState([]); I am assigning a method to an object property inside a useEffect hook that's meant to…
1
vote
1 answer

remove fluent UI details List hover color issue

I am using fluent ui detailsList. I have two columns one have no header name. but its have row data. If I hover my mouse its highlighted. I need to remove that header highlight color. If someone have an idea please suggest me. { key: "title", …
AlexDemo
  • 141
  • 3
  • 14
1
vote
0 answers

How to make collapse paneItem in navigationpane in fluent ui in flutter

I am trying to do collapse paneItem in navigationpane after a lot of searcb and i didn't found anything about that if anyone used fluent ui with flutter and know how to do that it will be nice That is mycode: import 'dart:ui'; import…