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

Detail List Multi Select get latest selected/unselected item not working

Actual Behavior Detail List Multi Select get latest selected/unselected item not working properly If I use below code am facing this issue this._selection = new Selection({ onSelectionChanged: () => { // Multi Select get latest…
Mohamed
  • 13
  • 3
0
votes
0 answers

React Fluent UI integration with Storybook

The fluent UI components are breaking inside storybook view. Do we need to add any specific addons inside storybook main.js ? Please find below the details: .storybook/main.js "addons": [ "@storybook/addon-links", …
Akhil
  • 35
  • 8
0
votes
2 answers

Fluent UI datetime picker current date color not changing issue in react

I am working with Fluent UI datetimepicker. I am trying to change color in today. But its not changing default blue color. const DatetimePickerFileds = (theme) => { return mergeStyleSets({ root: { selectors: { ".dayIsToday":{…
A M N Kumari
  • 79
  • 2
  • 7
0
votes
1 answer

How to change Fluent UI controls default blue color when focus in react

I am using Fluent UI with react. I am trying to change default focus color in my dropdown. below is my code. But this is not changing color. const dropdownStyles = { Dropdown: { selectors: { ":focus": { borderColor: "green", …
A M N Kumari
  • 79
  • 2
  • 7
0
votes
0 answers

Fluent UI Callout Not attached to div when scrolling

I meet the issue that the "Callout" doesn't attach to target any more while scrolling the page. Upon checking the doc, it seems not natively supported to due computation cost. Is there a workaround to still attach the Callout to the div when…
kevin
  • 419
  • 1
  • 3
  • 11
0
votes
1 answer

Best implementation type for choice group with large number of choices

I am trying to implement an React component as shown in the picture. What would be the best implementation type to go for this? Choice group(https://fabricweb.z5.web.core.windows.net/oufr/7.155.3/#/examples/choicegroup) seems like an option, but…
Tony
  • 125
  • 1
  • 2
  • 7
0
votes
0 answers

area-required-children accessibility bug on Fluent UI Details List

I have a list using FluentUI created:
user989988
  • 3,006
  • 7
  • 44
  • 91
0
votes
0 answers

How to add unit test for FluentUI Dropdown using RTL and Jest

We are working on Custom Teams App and using common components from @fluentui/react-northstar. For this we have used Dropdown component of @fluentui/react-northstar to show the suggestions based on the entered text Now when I am trying to add unit…
Naina
  • 63
  • 6
0
votes
0 answers

how to use one event handler for multiple dropdown types in React hooks

I am using fluentUi/react control "dropdown". I have multiple dropdown controls in the same page, and I am trying to use one single event handler for all of them. I can't seem to find a way how to handle this. const _options: CheckboxItem[] = [ …
user20377051
  • 25
  • 5
0
votes
0 answers

Change NavLink left padding for FluentUI Nav

When styling the Nav bar, I cant find a way to set that padding and make it smaller I have try add a custom style or class in each item but is not working. any idea? If i apply style to the link or the compositeLink, just overwrite all the…
Fraga
  • 1,361
  • 2
  • 15
  • 47
0
votes
0 answers

Enable selection only on checkbox in Fluent UI DetailsList component

I use DetailsList component in Fluent UI. I can select multiple items. The problem is that I have to make this selection only on the checkbox, not outside of the checkbox. With the current implementation, I can select row item wherever I click on…
Ozan Bilgiç
  • 215
  • 1
  • 9
0
votes
1 answer

fluent ui styling, border is not defined

i am using fluent ui which uses Griffel for styling. When i try to provide border: "none" it's throwing error that string not assignable to undefined import {makeStyles} from "@fluentui/react-components"; export const settingsButtonStyle =…
aryan singh
  • 374
  • 2
  • 9
0
votes
0 answers

Add a line (placeholder) before the element in DOM on hover

I'm trying to add dotted line between the current element and previous element when draggable hovers over element as in image. Note the RED dot (manually added in image) placeholder before the yellow color element. It is in middle of two. I tried…
unknown_boundaries
  • 1,482
  • 3
  • 25
  • 47
0
votes
2 answers

Make the dropdown button always show a placeholder text

I would like to realize a textfield and a dropdown. When users select an option in the dropdown, the selection will be written to the textfield. And users can write whatever they want in the textfield; the dropdown list is supposed to give users…
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
0
votes
0 answers

Execute a query after state change

I am using the Fluent UI React module to develop a custom pivot component as follows: export type PivotHeaderProps = { selectedPivotKey: string; pivotItemHeaders: string[]; pivotKeys: string[]; setSelectedPivotKey:…
Chintan Rajvir
  • 689
  • 6
  • 20
1 2 3
…
20 21