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

Sticky tab bar with Fluent UI's Pivot

I am building a tabbed environment using Fluent UI's Pivot component. Some of the tabs (or PivotItems in Fluent UI parlance) are quite long and need to be scrollable. Is there a way of having the tab bar be sticky such that it stays on top of the…
foobar
  • 153
  • 6
2
votes
2 answers

How to create a "danger" button in fluentui (office ui fabric)?

How to create a "danger" (red) button in the Microsoft fluentui library? Like one have in other ui frameworks like bootstrap etc. There are and but I have not found anything like ? Alternatively, how do…
Nikolay
  • 10,752
  • 2
  • 23
  • 51
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
1
vote
1 answer

FluentUI DetailsList - item state updated but component not rendered properly

i have a button in my column to change the color of the Row , i have check the componentdidupdate and shouldupdatecomponent state are getting change but the change not reflected in the UI, when sorting or the color also getting…
Dhawooth Ibnu Shahaman
  • 11
  • 1
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
vote
0 answers

How can I disable the checkbox in a Details List after certain numbers of item selection?

I have a fluent UI details list component which contains onRenderCheckbox method. We are using this method to render a custom checkbox. Now the requirement is after 'N' number of item selection those checkbox should be disabled and if someone…
Xero
  • 21
  • 2
1
vote
1 answer

Loading Fluentui 9.19.1 React components' style on Microsoft SharePoint WebPart

I'm currently developing a Microsoft WebPart. I'm using "yo @microsoft/sharepoint" to generate the project with React framework and I'd like to use the new "@fluentui/react-components" to design the WebPart. But, when I deploy the application, the…
Dams
  • 11
  • 4
1
vote
1 answer

FLuent UI React v9 in Formik

I created a Formik form that uses Fluent UI v9 components on a Formik form (Input, Textarea and Dropdown). The first 2 work as expected but I cannot figure out how to wire up the Dropdown, resulting in two issues: (a) the dropdown does not update…
Donald Koscheka
  • 336
  • 1
  • 6
1
vote
0 answers

Add link to text in react

Assuming I have this text : Sources document : link1 link2 link3 I want to add a a fluent ui Link components to all 3 string link1, link2, link3 like this : {link1} and return the initial text with the…
Yafaa Ben Tili
  • 176
  • 1
  • 7
1
vote
1 answer

How to style Fluent UI checkbox?

I need to style Fluent UI checkbox and change checkmark color while it is in indeterminate state. I use Flueint UI 8.x. "dependencies": { "react": "16.8.6", "@fluentui/react": "8.29.0", "react-dom": "16.8.6" } I was able to style…
Sergiy Kostenko
  • 273
  • 1
  • 2
  • 11
1
vote
1 answer

Display few items in the list TypeScript/React/FluentUI

I have the following code to display a list of items using Fluent UI DetailsList control. The response includes a total of 200 items. However, I only see 30 items in the list on running the code. What am I missing? import React from 'react'; import…
user989988
  • 3,006
  • 7
  • 44
  • 91
1
vote
1 answer

How to avoid validation on clearing values from the textfield in react

I have a question regarding validation of inputs. I'm using Fabric UI for the textfields, which have onGetErrorMessage, which I'm using to validate input. The textfield is a controlled element. It is all working well, except one moment, when I do a…
Alnedru
  • 2,573
  • 9
  • 50
  • 88
1
vote
0 answers

Fluenui white dropdown color CSS

Hello I am trying to configure my dropdown using Fluent ui. But I am unable to achieve current vs expected result. How do you I configure in order to have a black background when drop down. At the moment my drop-down background is standard white and…
Glen Sale
  • 43
  • 2
  • 8
1
vote
1 answer

Adjust the width of the dropdown button

I'm using the preview Dropdown of Fluent UI. I would like to reduce the width of the button. I tried to modify maxWidth: "500px", it did not work. I tried to add root={{ minWidth: "100px"}} in the
SoftTimur
  • 5,630
  • 38
  • 140
  • 292
1 2
3
…
20 21