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

Fluent UI DatePicker formatDate date

I am working on a project with Fluent UI and React JSX and my question is how to format date of DatePicker component to be day.month.year format? Example: { return (date.getMonth() + "." + date.getDate()…
Ștefania
  • 11
  • 1
  • 2
1
vote
1 answer

Fluent UI - Change checkbox from square to circle

I need to change the checkbox input from Fluent UI from a square to a circle. I want the checkbox to look like the checkbox used in the DetailsList. I already figured out how to change the checkmark, but I was not able to change the input with type…
Jul
  • 141
  • 13
1
vote
1 answer

mergeStyles can't child (by id) of parent (by class)

For something like the following:
Label text
The following CSS is able to style 'Label text' .example #label { color: red; } But it does not work with fluentUI mergeStyles: const…
user6118986
  • 341
  • 2
  • 15
1
vote
1 answer

Is it possible to adjust width on date picker control in React office UI fabric

Having issues using the DatePicker control and fixing width for my SPFX app. The default width is 100%. I want it to be the same width as my text input, which I pass in a 700px width property into the styles parameter. There is no width or styles…
longieng-myo
  • 41
  • 3
1
vote
1 answer

How to register custom icons by reading a SVG file from path?

I am building an application making use of @fluentui/react (version 8.34.7) and I am using create-react-app. One of the things I would like to do is register custom icons which are in SVG format. Following the example here, I came up with the…
Gaurav Mantri
  • 128,066
  • 12
  • 206
  • 241
1
vote
1 answer

React function component cannot retrieve state

The source code is uploaded in codesandbox. It is a DetailsList, when clicking column header, the list disappears. The reason is that columns is [] in onColumnClick function (there is a console.log line). Why setColumns updated state successfully…
Mr.Wang from Next Door
  • 13,670
  • 12
  • 64
  • 97
1
vote
0 answers

How to implement Nav with custom heading group in shiny.fluent

I am trying to use shiny.fluent and implement one of the Nav examples from the Microsoft fluent UI documentation page. The example uses some JavaScript to apply a heading style to the group headings and I'm not sure how do apply the JavaScript in…
Tadro
  • 61
  • 1
  • 3
1
vote
2 answers

Fluent UI dropdown required not identified

I have used the fluent UI dropdown in my form. The dropdown is a required field for me. I have used the "Required Dropdown" from Fluent UI but that doesn't work. I have tried this
DSR
  • 31
  • 9
1
vote
0 answers

Add Nested Headers over a group of Headers in DetailsList in FluentUI

I am trying to add custom headers to group Headers of a Detail List in Fluent UI but not able to do. I think we can do this using onRenderDetailsListHeader but I got no clue about the implementation.
etotientz
  • 373
  • 5
  • 18
1
vote
1 answer

Dropdown onChange method unable to get the selected value in fluentui/react-northstar

I am using fluentui/react-northstar library. I am using the dropdown component and using the onChange handler. I am unable to get the current selected value from the dropdown in the onChangeHandler method. My code…
Titus Annadurai
  • 11
  • 1
  • 4
1
vote
1 answer

Console Errors in NextJS TypeScript and Fluent UI

I am using NextJS, TypeScript and Fluent UI. I have generated the app using yarn create next-app --typescript. Later on I added Fluent UI using $ yarn add @fluentui/react command. I have not added anything else. I am using…
newbie
  • 530
  • 1
  • 9
  • 36
1
vote
1 answer

Move Chevron in Fluent UI Nav to Right Side

In any of the Nav examples at https://developer.microsoft.com/en-us/fluentui#/controls/web/nav how would I go about moving the Chevron from the left side to the right side?
Alex L
  • 11
  • 2
1
vote
1 answer

What do these strange values of padding mean in Microsoft's Fluent-react library?

In this link, the section [Vertical Stack - Gap and Padding Sizes], click [Show code], then at lines 30, 34, 38, etc. I see some strange values of padding (and some of childrenGap) like 'm 40px', 's1', 's2', 'l1', and have no idea what they mean or…
hoangtuansu
  • 11
  • 4
1
vote
0 answers

Fluent UI, NormalPeoplePicker. How to pick suggested value with 'tab'?

I have normal people picker dropdown with search. How can I pick first suggested value with 'tab' button?
Nikita Ivanov
  • 63
  • 6
1
vote
0 answers

Getting dialog state from another component

I have a PCF which load few components in the same index.ts: main container, aside container and another one container where a dialog component is loaded. This dialog includes a dropdown control which load some items from the index.ts init…
MAL
  • 143
  • 1
  • 14
1 2 3
…
20 21