Stack Overflow
Stack Overflow

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

Push items to fluent ui commandbar component

I am using the fluent UI command bar component. When I try to push additional items to the _items array after the initial render, the command bar adds them as overflow items in the clickable ellipsis at the end of the command bar. If the condition…
ambe5960
  • 1,870
  • 2
  • 19
  • 47
2
votes
1 answer

Fluent UI Reading the height of DetailsList's ViewPort

I'm using DetalisList within ScrollablePane component to keep the header in view, and let the rows scrollable. However, this requires me to manually set the height of the scrollable container. div.scrollable-container ScrollablePane …
CookieEater
  • 2,237
  • 3
  • 29
  • 54
2
votes
1 answer

Navigation in DetailsList not possible with Monaco editor

Hi I'm using the DetailsList and I want to be able to move my selection from column to column using tab. But I came across this issue on Github: https://github.com/microsoft/fluentui/issues/4690 Arrow keys needs to be used to navigate across the…
C1rdec
  • 1,647
  • 1
  • 21
  • 46
2
votes
2 answers

IColumn in DetailsList: how to set column width at mount

How can you set the columns of a DetailsList to a specific width at mount?k I wanted to save the column widths every time they are saved and restore them when the component remounts, i.e., revisits the view where the list is.
user1763729
  • 167
  • 1
  • 11
2
votes
1 answer

How do you apply a style to icon of type IIconProps in Fluid UI?

I have button like the sample below with an icon (addFriendIcon). https://developer.microsoft.com/en-us/fluentui#/controls/web/button How do I add a style to this icon? For example change the color? import * as React from 'react'; import {…
EvilEddie
  • 1,026
  • 2
  • 12
  • 23
2
votes
1 answer

How to align Card.Section components in MS Fluent UI?

I have Card with 2 Card.Sections. I'm trying to align the second one to far right however nothing works for me. I tried: Setting sections as flex and assigning marginLeft: auto for the second one Setting Card position: relative, then adding float:…
VIPPER
  • 326
  • 4
  • 24
2
votes
1 answer

Fabric UI Modal custom sizing

Please help to customize Fabric UI Modal window. I've tried to minimize height and remove vertical scrolling. Tried to work with containerClassName, className, scrollableContentClassName - but none of them work. In scss file: .modal { …
Kavrat
  • 87
  • 1
  • 8
2
votes
2 answers

Official documentation and examples of Office UI Fabric / Fluent UI React Charts?

First please bear with me. I do not think that this question is appropriate for Stack Overflow. I first tried to ask this question in the official GitHub repository of this project, but they strongly suggest to ask question in Stack Overflow with…
Narvalex
  • 1,824
  • 2
  • 18
  • 27
2
votes
1 answer

Fluent-Ui-React Icon Outline on Hover

I am a beginner in fluent-UI with react (@fluentui/react-northstar 0.47.0) I tried different solutions but couldn't solve this result. Kindly guide me here. Currently, when I hover mouse on the icon it turned filled but I want to keep them outline…
Magi
  • 49
  • 1
  • 9
2
votes
3 answers

How to customize the column title style in Details list

How can I change the font size and padding of the title cell in details list. I am using onRenderDetailsHeader prop to customize header render. private renderDetailsHeader = (detailsHeaderProps: IDetailsHeaderProps) => { return ( …
LJP
  • 1,811
  • 4
  • 23
  • 34
2
votes
2 answers

Override margin in Separator Component of Fluent UI using React

I'm trying to override the margin attribute of a Separator component using Microsoft's Fluent UI using React. The top-margin appears to default to 15px and I would like it to be less than that. Here's a screenshot: The beige color section above…
risingTide
  • 1,754
  • 7
  • 31
  • 60
2
votes
2 answers

How to use RouterLink with Microsoft FluentUI React Link component

Pretty straight forward. I've seen examples of React Router Link usage on other Microsoft Fluent UI controls. I have not found a way to use it with the Fluent UI Link component though.
myermian
  • 31,823
  • 24
  • 123
  • 215
1
vote
1 answer

React - Fluent UI - How to truncate the text in a card

I have the example from this link: https://codesandbox.io/s/upbeat-wood-tscc2h?file=/example.tsx If the text in the card is too long, the text is clipped. I've been trying to truncate the text so I have some sort of elipses or something similar at…
user3587624
  • 1,427
  • 5
  • 29
  • 60
1
vote
3 answers

How to center text elements in an Angular fluent-UI drop-down?

I am trying to center-align text elements in my Angular fluent-UI dropdown. I've tried using text-align and text-align-last, but no luck. Here is the CSS: .fluent-select { text-align-last: center; text-align: center; min-width: 0; flex:…
Sam
  • 19
  • 2
1
vote
0 answers

Donut chart data not updating on hover

When I select the legend in a donut chart, it focuses and updates the corresponding arc and value to the selected legend data as expected. However, when I hover over the selected arc itself, it renders the initial InsideDonut value. Here's the code…
Egeon
  • 11
  • 2
1 2 3
…
25 26