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

office ui fabric icon inside a circle

The following code puts an icon inside a circle:
Add a Friend
left: { float: 'left' }, icon: { border: "solid 2px", …
user989988
  • 3,006
  • 7
  • 44
  • 91
0
votes
1 answer

Rendering custom item columns with sorting

Can anyone help me resolve the typing issues below for a FluentUI details list? I have the following code to display a list of items using Fluent UI details list. I need to add the functionality to sort items in each column in ascending order like…
0
votes
0 answers

Fluent UI Input Element not shrinking

I am creating a react application, using Fluent-React as my components source and use TailwindCSS for my CSS ( Align,Flex,Positioning etc. ). In my page I have a FluentUI Input component, it is not shrinking as the browser screen-width reduces. It…
Badhusha
  • 88
  • 1
  • 1
  • 9
0
votes
1 answer

Why can't I set the background color of my fluent UI button to be white?

I am using a Button from the fluent UI library for my application. And I want to set the background color of this button to be white. I tried setting the background color to any other color and it works, but when it is set to white, it seems like it…
0
votes
0 answers

Fluent UI combobox Label

For controls like fluent-text-input we can add a label which appears just above the control. This seems to be not possible for fluent-combobox Any one has suggestions on how to add label for the combo box just like the text box?
Sam
  • 281
  • 5
  • 15
0
votes
0 answers

Can we add a footer that is always visible when expanded in React Fluent UI dropdown

My requirement is to make an option render at the bottom of the fluent ui dropdown and make it stick there(always visible when expanded) even if there is an overflow and the scroll is enabled on the dropdown.
Vsreddy
  • 71
  • 1
  • 9
0
votes
1 answer

How can I pass the textfield input value to button onclick event?

I'm new to React and TypeScript. I have a textfield and a button using FluentUI. When a user types a value and clicks the button I need to pass the textfield input value to button onclick event and call the API with the search input. Here is my…
user989988
  • 3,006
  • 7
  • 44
  • 91
0
votes
0 answers

How to use @fluentui/react-icons

Is there any better way to use @fluentui/react-icons I am importing icons below way. import { Home20Regular } from '@fluentui/react-icons' I am expecting it should download only one Icon during build using treeshaking But looks like it is…
Ashis
  • 1
  • 1
0
votes
0 answers

Fluent UI ComboBox allowFreeform clear the user input text

I tried below code, I want to clear my allow free form user input text and I find github PR in fluent ui github page for this issue i don't know how to use this: https://github.com/microsoft/fluentui/pull/5787 import { ComboBox } from…
0
votes
0 answers

Substitute for offAriabLabel and onAriableLabel for FluentUI Toggle?

I am trying to use a FluentUI Toggle with Windows Narrator. I am using custom onText and offText, so I would like the screen reader to read the approprate text instead of "on" and "off". However, according to the documentation, onAriaLabel and…
wahoowa
  • 358
  • 1
  • 10
0
votes
0 answers

Detaillist deselects all selected Items if clicked on unselected Item

This behaviour is annoying, if you click on the checkbox for selection, it behaves correctly and adds the item to the total selection. However if an unselected Item is clicked on outside of the checkbox the selection will reset and I end up with…
ThatBrianDude
  • 2,952
  • 3
  • 16
  • 42
0
votes
0 answers

onSelectionChanged from detaillist not firing fluentui react

I built a custom pagination and need to sustain the selection across these renders. So if the user selects item 1 on page 1, switches to page 2, then switches back, I need to reselect item 1. For some reason onSelectionChanged isnt firing for me,…
ThatBrianDude
  • 2,952
  • 3
  • 16
  • 42
0
votes
1 answer

TextField error in console in FluentUI React

I am using TextField component provided by Fluent UI in React wherein I am rendering a custom validation error message (JSX.Element).
0
votes
0 answers

How do you calculate aria-posinset for detailsRow component?

I have been getting aria-posinset errors(accessibility errors) for DetailsRow component Component:
agretsuko
  • 41
  • 1
  • 5
0
votes
0 answers

How do you disable checkbox in GroupedList component?

I have a groupedlist component where onRenderCell returns a DetailsRow component.