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?

Answer 1

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.

Answer 2

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;
}