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
0
votes
0 answers

IDialogContentStyleProps isMultiLine property

What exactly is affected when isMultiLine set to True for the Dialog widget? I've tried setting that and don't see any visual difference.
Tim H
  • 21
  • 3
0
votes
1 answer

how to add a date picker to Form in @fluent/react-teams

how do we include a date picker to the Form, I didnt find date picker is there a way to extend with custom components. the component library link
umgolla
  • 39
  • 8
0
votes
1 answer

How to reduce the height of the list elements in dropdown

I have tried to override the height for the list items of the dropdown dropdown list width and height overrided .ui-list{ max-width : 200px max-height : 200px } but only the height is not getting overridden styles not…
umgolla
  • 39
  • 8
0
votes
1 answer

set a custom input id on the combobox

Is there a way to set a custom input id on the combobox component?
pikk
  • 837
  • 5
  • 21
  • 38
0
votes
1 answer

what is the minimum react version for @fluentui/react-northstar?

This project using react ^17.0.1" with fluentui/react-northstar but I am getting error as below package.json while running npm i @fluentui/react-northstar. what can be the reason ? npm i @fluentui/react-northstar npm ERR! code ERESOLVE…
DevÁsith
  • 1,072
  • 12
  • 38
0
votes
1 answer

How to change border colour in dropdown in fluent ui?

has styles props. which expects IDropdownStyles.But not able to change border outline colour. I tried this, root: { width: 300, color: "red", backgroundColor: "red", borderColor: "red", borderTopColor: "red", outlineColor:…
0
votes
1 answer

what is different between style vs styles in component - fluentui/react-northstar

I am using fluentui/react-northstar as in the doc, styles has below definition Name Default Type Description styles ComponentSlotStyle Additional CSS styles to apply to the component instance. but what is different between style…
DevÁsith
  • 1,072
  • 12
  • 38
0
votes
0 answers

How to use styling in React fluentui with child components

How do you create components with React fluentui and apply styling to root and child components?
Amit
  • 29
  • 4
0
votes
1 answer

How to create a complex selector using mergeStyleSets referencing a class?

I am building a web application in ReactJS. I have the following: const MyComponent = (props: { array: Array }) => { const styles = mergeStyleSets({ container: { backgroundColor: transparent, }, item: { …
Andry
  • 16,172
  • 27
  • 138
  • 246
0
votes
0 answers

How can I specify "download" attribute for menu item?

I have a FluenUI contextual menu component, initialized like this: const items = [ { key: 'linkWithTarget', text: 'Download File', href: 'https://some.site.com/somefolder/somefile.txt', } ];
Nikolay
  • 10,752
  • 2
  • 23
  • 51
0
votes
1 answer

DetailsList - Display a message when empty

are you guys aware of an elegant way for disaply a message like "no items found" or similar, when a FluentUI DetailsList is empty? Currently the DetailsList is rendered but without any row. Cheers
0
votes
1 answer

Where is the class "DataItem" and "CustomGrid" defined in Blazor FluentUI component documentation?

I am referring to the documentation of Blazor FluentUI here - https://blazorfluentui.azurewebsites.net/listPage. In List components, documentation refers to the class "DataItem" and "CustomGrid" but I could not find them in the doc. Where is their…
rsp
  • 537
  • 2
  • 13
0
votes
1 answer

How to make a DetailsList header shows tooltip

How to configure detailsHeader properly to make it show tooltip for the header text? In each column, I've added ariaLabel, name, key, fieldName and have tried the top answer in this post but does not work: How to render a column header with both…
bunny
  • 1,797
  • 8
  • 29
  • 58
0
votes
1 answer

How to change fluent ui primary or secondary text color?

I have a very simple question. It should be very easy. I can't change color of secondaryText in PersonaDisplay.
0
votes
1 answer

How to use Fluent UI icons in ShinyWidgets

I have a problem using fluent UI icons in "shinyWidgets" Packages. I can't access fluent UI icons using tags$i() and checkboxGroupButtons() in contrast to Fontawesome and Glyphicon icons please let me know if you have any…
BJK
  • 153
  • 5