Office Ui Fabric Dropdown doesn't expand to its content

Question

I am using Office UI Fabric React that comes with SPFx. It's version 6.214.0. I have a dropdown that looks like this:

<Dropdown placeholder={strings.Position} label="" options={positionOptions} onChange={(e, option) => setPosition(option.text)} styles = {dropdownStyles} className={styles.dropDown}/>

The styles.dropDown has the following styles:

.dropDown{
  float: left; 
  margin-right: 15px; 
}

The values are filled dynamically based on a web service. However the dropdown width doesn't fit the items inside.

If I remove the float left, all of them will take 100% of the width.

How do we achieve this with UI Fabric React?

score 0 · Answer 1 · answered Jul 23 '21 at 03:09

0

The callout width can be over-written by adding a class to the page. Auto width ensures the callout width will be determined by its contents.

.ms-Callout {
    width: auto;
    min-width: 150px;
}

answered Jul 23 '21 at 03:09

Shane

303
2
9

Unfortunately not working and neither https://github.com/microsoft/fluentui/pull/16298 (Enable Dropdown component to adjust the width to fit content) – Heimi Mar 16 '22 at 18:39
The style needs to be as is without unique IDs appended to class names. So dropping this into your .module.scss will not work. To create a stylesheet without the unique ID's appended to the class names so that you can do style overrides: 1. Add an .scss file under /webparts/WebPartFolder (dont use the word "module"); 2. Run "gulp build", and in the same folder a .scss.ts file gets created with the same name (hidden in vs code); 3. Copy the require statement from the .scss.ts file and add this to the WebPart.ts file at the top. Then when you use build and bundle, these styles are shipped as is – Shane Jul 04 '22 at 01:41

score -1 · Answer 2 · answered Apr 21 '21 at 01:59

I would recommend using the styles prop. You can style the root of the component as well as individual aspects of the output like the callout, the dropdownItem, the label and more. A lot of Fluent UI / office-ui-fabric-react components have this styles prop - they give you clearly defined elements that you can override style settings for.

Your float may actually be contributing to this issue. A float takes an element out of the normal flow of rendering - and might be screwing with the Dropdown component's ability to size its callout based on the widths of its children. You can read about what float actually does on the MDN Web Docs.

In the first instance I would suggest removing your float: left statement and seeing if that improves things. If that doesn't work I would try applying a minWidth to one of the available keys in the styles prop - perhaps the dropdownItem element.

This question is about Fluent UI. It has lilmited control for items list callout element. Here is the issue related to the question: https://github.com/microsoft/fluentui/issues/16181 — Artyom Shegeda, Jun 23 '21 at 18:47

Office Ui Fabric Dropdown doesn't expand to its content

2 Answers2