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

How to get all selected values of Tag Picker in Fluent UI

In the docs, some of the props do not exist on the component, so I guess it's outdated. I have a TagPicker component, I'm using the Tag Picker with inline suggestions one.
Yosi Leibman
  • 386
  • 3
  • 16
0
votes
1 answer

Tag picker onChange event not firing

I'm trying to trigger an event when the user writes something in the input field of Fluent UI Tag Picker but it seems that it's not working for some reason. The documentation provides examples for onFocus event and that one is working fine, however…
Ahmed Attia
  • 3
  • 3
0
votes
1 answer

@testing-library/react render Error: `target` and `targetRef` props are `undefined`, it' required to use one of them

I am trying to write a unit test for a custom react component that use the Dialog from @fluentui/react-northstar when I try to render the component from the test I get a error: Error: `target` and `targetRef` props are `undefined`, it' required to…
Valentin Suruceanu
  • 23
  • 8
0
votes
0 answers

Next.js - When I Refresh the page styling of Fluent UI dissappears

I am trying to learn Fluent UI, but it doesn't work well. I searched the documentation, and wrote the same codes, but I always get the same result. When I refresh the page, styling disappears and I see an ugly Nav. How can I solve this problem? Or…
Ozan Bilgiç
  • 215
  • 1
  • 9
0
votes
1 answer

how to call child component callback event from parent component in react

Hi I am a beginner in React, I am using Fluent UI in my project . I am planning to use Panel control from Fluent UI and make that as common component so that I can reuse it.I use bellow code import * as React from 'react'; import { DefaultButton }…
kuntal
  • 1,591
  • 2
  • 16
  • 36
0
votes
1 answer

ScrollablePane with DetailsList cannot scroll fixed header issue

I am using fluent UI details list. I tried to scroll my headers with scrollbar. But My headers are not scrolling when I scrolls horizontally. This is my code. I found this from an example. But nothing change from this. If anyone have idea about this…
AlexDemo
  • 141
  • 3
  • 14
0
votes
1 answer

Adding sorting icon in column header in Details List in Fluent UI

For a DetailsList or ShimmeredDetailsList, I need to add two arrows (one up, one down) besides the column name in the column header so that the user can look at the grid and tell which column is sortable and which is not. Currently I am using…
coolest-duck
  • 105
  • 1
  • 1
  • 10
0
votes
1 answer

Adding aria-label to label or paragraph

I am working on fixing a bug for a frontend built using Fluent UI. I have a ChoiceGroup in which I have rendered two div tags each having text. I want the screen reader to read both the texts when the first div is chosen. The only way I can narrate…
RPDev
  • 1
0
votes
1 answer

Is it possible to define global styles with fixed css class names (or selectors) using merge-styles library?

I'm using Microsoft's Fluent UI library to build a React application. For styling of my own components I switched to using their merge-styles library, mainly because it integrates nicely with Fluent UI theming and all of their components. (I'm still…
alex3683
  • 1,460
  • 14
  • 25
0
votes
1 answer

How do I correctly style a component in fluent UI/React/ts?

I am trying to add a background color to this div: import * as React from 'react' import { Itest } from '../../../../../models' import { getPreviewStyles } from './preview.style.ts' type IPreviewProps = Itest const PreviewC:…
Colorful Codes
  • 577
  • 4
  • 16
0
votes
1 answer

React Fluent UI - Change color of checkbox's checked mark and label

I've a react app using Fluent UI. I'm using component but it's having it's default colors and behavious. Like this: I want to change the color of the checked mark and also the label (Green checked mark and brown lable). I tried the…
Ankit Saxena
  • 1,067
  • 1
  • 4
  • 16
0
votes
1 answer

How to use Fluent UI Icons on an intranet

I made a react project using Fluent UI kit. I have this code: import { initializeIcons } from '@fluentui/font-icons-mdl2'; initializeIcons(undefined, { disableWarnings: true }); It works fine on my machine, but this project is deployed on an…
Alex
  • 671
  • 5
  • 19
0
votes
1 answer

How can I pass innerHTML to an onClick function (Typescript)

I'm trying to pass the Square element's innerHTML to the onClick function. I have also tried to pass in just i but it always is equal to 100. Is there a way to either pass i when it's equal to the same value that goes into the Square or is there a…
Titan Gaming
  • 3
  • 3
0
votes
2 answers

How can I trigger a panel to open outside of the const?

I understand that the line where the const isOpen is a hook, but I need to change the value of openPanel to true to open the panel. I'm new to react and fluentUI. It's probably something really obvious that I just don't realize at this stage. export…
Titan Gaming
  • 3
  • 3
0
votes
0 answers

fluent ui nortstar FormDropdown make it required field

how can we make the the dropdown in the Nortstar Form as a required field? is it possible to do so ? in the Fluent ui Form for the textarea and input component we have required Field so onsubmit it validates the input Form shows to fillout for…
umgolla
  • 39
  • 8
1 2 3
…
20 21