Skip to main content
317 questions
Newest Active Bountied Unanswered
Filter by
Sorted by
Tagged with
0 votes
1 answer
96 views

I’m trying to use Fluent UI React v9 controls in a SharePoint Framework (SPFx) 1.21.1 web part, but I’m running into multiple TypeScript errors and cannot get even a single control to render. Here are ...
Jessica Martinez's user avatar
  • 11
1 vote
0 answers
24 views

I'm using Fluent UI's GroupedList component in a React app to build a file/folder browser UI. The structure I'm rendering is hierarchical, where each group represents a folder, and it can contain both ...
Abhishek More's user avatar
  • 11
0 votes
0 answers
55 views

In my Blazor view, I am dynamically loading a React component that is merely a wrapper around react-jsonschema-form: <div ref={formParentDivRef} onBlur={handleBlur}> <Form ref={...
oli's user avatar
  • 807
0 votes
0 answers
89 views

I'm having trouble getting the full term tree from the graph. The sharepoint Termstore has a hierachy and to get to display the full hierachy in my application I have to make hundreds of calls because ...
Gydo Zajkowski's user avatar
  • 1
0 votes
0 answers
74 views

I am facing an issue while building my React TypeScript app. The build fails with the following error: Module not found: Error: Can't resolve '@fluentui/react/lib/Utilities' in 'C:user\...\...
Muthukumar kanagaraj's user avatar
  • 11
0 votes
1 answer
196 views

Anyone used a fluentui react v9 time picker component? I created a PCF control for a datetime picker. I used the Time Picker With Date Picker as a reference for my PCF, and installed both @fluentui/...
Ikyong's user avatar
  • 83
0 votes
0 answers
44 views

I am designing an eventhandler to handle various inputs that are constructed using the FluentUI React component library. Most of the components emit "standard" React.Changeevents (such as ...
user24561305's user avatar
  • 1
0 votes
0 answers
65 views

I'm using fluent ui react components. I want to have the AvatarImage with a whitebackground. const avatar: AvatarProps = { image: { src: imageSrc } }; No matter what I do I cannot seem to find a way ...
rid00z's user avatar
  • 1,626
0 votes
1 answer
442 views

I have a fairly complex React App (v18) using FluentUI (v8) and building with Vite (v5). There are a collection of CSS variables which are influenced by the theme, but for my app they seem to be ...
gred's user avatar
  • 642
3 votes
0 answers
99 views

I need to style a fluent UI checkbox using the style props. However based on the documentation it is unclear how to style the checkbox differently in its checked vs unchecked state. I am able to set ...
Christopher Konopka's user avatar
  • 63
1 vote
1 answer
172 views

StackBlitz here I'm trying to create a card component that represents a delete-able item, and I want the delete button to only be visible when the card is hovered. According to what I've found, this ...
Benjin's user avatar
  • 2,429
0 votes
1 answer
193 views

I have a component derived from the fluent ui Dropdown, called DropdownWithFilter. It sorts Dropdown options using a DebounceSearchBox. I have DropdownWithFilter working perfectly, but my last step is ...
Arms's user avatar
  • 1
0 votes
2 answers
100 views

I have below example where I am trying to render a YouTube card. The issue I am facing is that the play button white background is not adjusting into the play icon that I am setting through my CSS ...
user3587624's user avatar
  • 1,471
-2 votes
1 answer
348 views

Problem: From other UI Libraries, I am used to having some sort of Box and/or Stack component that provides an API to the underlying tokens system. In Fluents V2 docs under "design language",...
Bubulux's user avatar
  • 253
1 vote
0 answers
109 views

When I create an Outlook Add-in using React Framework through the Yeoman generator, and without applying any modifications, if I run the npm run build I get a bundle of 13MB for the taskpane.js, it ...
user1912238's user avatar
  • 131
0 votes
1 answer
236 views

I created a fluent ui data grid using this guide https://react.fluentui.dev/?path=/docs/components-datagrid--docs and from that doc, there's a doc for dropdowns and I placed a dropdown component in ...
Josh's user avatar
  • 73
1 vote
0 answers
117 views

I am using the ShimmeredDetailsList from fluent UI 8 and I want to make some rows sticky. The problem is that this component renders the items inside virtualized pages and if I set position: sticky on ...
Billy's user avatar
  • 27
-1 votes
2 answers
316 views

We are trying to implement a text area similar to below where in in a single sentence, there are multiple placeholders. We are using react for this. Is it possible to achieve below result using any ...
404's user avatar
  • 277
0 votes
1 answer
164 views

I have this example that I took from React Fluent UI: https://stackblitz.com/edit/fahztj?file=src%2Fexample.tsx. I tried to modify it in a way that the component Tab is now a Button, however the tabs ...
user3587624's user avatar
  • 1,471
0 votes
2 answers
248 views

I'm writing a simple "select all" checkbox that checks/unchecks all other checkboxes, using react native with typescript and FluentUI checkboxes. Summarized issue: The state of the "...
Belle's user avatar
  • 1
0 votes
1 answer
416 views

I tried with render Item to add a divider and Icon to fluent ui drop but icons are not visible even the default value not showing the icons and the dropdown is not showing up after clicking import * ...
Viz's user avatar
  • 11
0 votes
1 answer
94 views

when I search breadcrumb component in breadcrumb. I found that when I resize the screen smaller, it's auto collapse item like this to fit screen resize screen 1 resize screen 2 and auto display more ...
Giii's user avatar
  • 17
0 votes
1 answer
506 views

Referring to Fluent UI React v9's DatePicker: https://react.fluentui.dev/?path=/docs/compat-components-datepicker--default, the value property is the default value. But when I set it, something ...
John Evans Solachuk's user avatar
  • 2,105
0 votes
1 answer
201 views

I am unable to remove the border and make the control color to grey.I have tried different things i can able to see in test harness but after importing solution in dynamics i am unable to find changes ...
Teja Vavilala's user avatar
  • 13
0 votes
2 answers
89 views

I have a Link dropdown which changes a DropdownSection component which contains an array of options. When I change to a different Link, I would like to set the default option of the DropdownSection to ...
tomtomdam's user avatar
  • 93
0 votes
1 answer
797 views

I have multiple command bar items that need custom SVG Icons, but no matter what I do, I cannot get the icons to work for my life. Here is the SVG I am registering as an icon: registerIcons({ ...
Shree Nandan Das's user avatar
  • 111
0 votes
1 answer
272 views

I am using fluent-ui's DetailsList to render a table. I am trying to convert this into a simple editable grid. The 1st column is a readonly string, the 2nd column is an editable TextField and the 3rd ...
AlbatrossCafe's user avatar
  • 1,862
0 votes
0 answers
141 views

I have a combox and I want to do somethings when we reach the end of the list while scrolling. I am not able to attach an event listener. let's assume that we just have to print 'reached' in the ...
CPD 5001's user avatar
  • 1
0 votes
3 answers
93 views

I have a component that contains a Checkbox component from the @fluentui/react-components library, and I am using an onChange event on the Checkbox component. const ContactText = ({ contact, ...
tomtomdam's user avatar
  • 93
-2 votes
1 answer
445 views

I am using typescript, react-hook-form along with yup validation and fluent ui. Whenever i am trying to submit a form i am getting this error ' Unexpected Application Error! Cannot set property value ...
Nelson Uprety's user avatar
  • 153
1 vote
0 answers
145 views

I am building a table grid using Fluent UI. The project is in React with TypeScript. However, I am facing a problem with the updated value. After double-clicking, the edit box appears in the selected ...
pifflox's user avatar
  • 13
4 votes
0 answers
347 views

Setup: I am provided a container div that can dynamically be any size and an image that can be any size. I want the image to always fit in the center of the container (with allowances for the ...
BobtheMagicMoose's user avatar
  • 2,553
2 votes
1 answer
993 views

With FluentUI React v9, how to change the color of the name and secondaryText for only one specific component (not globally in the theme)? This sample sucessfully change the background to red but I ...
pellea's user avatar
  • 476
0 votes
1 answer
383 views

I have a form that I want to submit, and the address fields can be populated by selecting an Address that will navigate you back to the form and fill in the form's input values. I use useNavigate() to ...
tomtomdam's user avatar
  • 93
2 votes
0 answers
342 views

Problem I'm working on a react app (CRA) with rooster-react, which utilizes @fluentui, so I was trying to set the theme of the toolbar using the respective theme provider, but it doesn't seem to have ...
nick zoum's user avatar
  • 6,653
0 votes
1 answer
431 views

I would like to know how to export the current view of detailsList(filtered, sorted data) to csv or any other format. Maybe someone already had an experience with this. Thank you
Dagbi Akerson's user avatar
  • 13
0 votes
1 answer
1k views

I am trying to pass dynamic CSS styles in html tags using Fluent UI v9 or Fluent UI 2. In the previous versions I could use the styles prop and wrap it in a function where we pass the props and ...
Chandan Rabha's user avatar
  • 1
1 vote
3 answers
1k views

I have Fluent UI modal dialog that I am showing in my site very similar to below example. https://codesandbox.io/s/practical-boyd-m5rw2k?file=/example.tsx EDIT: The code in codesandbox.io is the same ...
user3587624's user avatar
  • 1,471
0 votes
1 answer
906 views

I am using fluent ui popover component in my react app. When I am clicking outside the popover component it is not closing. Although in the documentation, the same code is working as expected. Here is ...
Saurav Likhar's user avatar
  • 105
0 votes
1 answer
245 views

I have a Card Fluent UI component defined like this <Card className={mergeClasses(styles.card, className)} onClick={() => onClicked(id)} > <CardContent {...props} /> ...
user3587624's user avatar
  • 1,471
0 votes
1 answer
281 views

I'm trying to follow the doc here to replace an entire slot https://react.fluentui.dev/?path=/docs/concepts-developer-customizing-components-with-slots--page#replacing-the-entire-slot I'm getting ...
Steven's user avatar
  • 832
0 votes
1 answer
180 views

I have a React component like this export const NewComponent: React.FC<NewComponentProps> = ({prop1, prop2, prop3 }) => { const getAbsPositionDialog = () => { const element = ...
user3587624's user avatar
  • 1,471
2 votes
0 answers
387 views

I need a unique custom attribute on the clickable part of fluent ui primary button. when I put on it custom attribute that starts with data- for example <PrimaryButton data-testid="...
miri W.'s user avatar
  • 241
0 votes
1 answer
311 views

Im creating a tiny replica of a table/detailsList with the intention to make the columns responsive and share the space available equally. Im trying to use the flexGrow prop from fluentUI. Problem is ...
Emil's user avatar
  • 1
0 votes
1 answer
1k views

I have a Card component from FluentUI library. I want to hover over the card and change the color of the border. This is my attempt to do it but for some reason I am having below error: type 'string' ...
user3587624's user avatar
  • 1,471
0 votes
1 answer
855 views

I'm trying to register an SVG as an icon, in Fluent UI. If the SVG exists in the local, referencing it directly like so: registerIcons({ icons: { 'icon-name': <svg></svg> } })...
Mavi Domates's user avatar
  • 4,591
3 votes
1 answer
3k views

Is there some way to specify width of the Fluent UI Combobox component (@fluentui/react-components)? For other input elements it can be set using style={{width: "123px"}} (not sure if that's ...
Bohdan's user avatar
  • 2,045
0 votes
0 answers
40 views

Is there anyway to add Breadcrumb to List behind emptySelectionActionGroups need to show name and label for my list? Can i add a button in right side behind filter text? Is there any example with ...
Mokh Akh's user avatar
  • 431
0 votes
3 answers
926 views

So I am trying to add an opacity to a background color but the specific background color I am using is coming from the fluent UI library, thus using Design Tokens. I know normally, I can add opacity ...
HackerMan33453's user avatar
  • 197
1 vote
1 answer
672 views

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 ...
Dhawooth Ibnu Shahaman's user avatar
  • 21

1
2 3 4 5
…
7