3

I am working with Outlook Add-in with Office UI fabric js UI components. I am having issue using dropdown.

Dropdown

When click on a drop down it doesn't show the dropdown list style and it opens a complete new panel with options.

enter image description here

I followed this link to add drop down component.

Sandun Tharaka
  • 727
  • 2
  • 9
  • 29

1 Answers1

3

The dropdown component has a prop called responsiveMode. This dictates how the container is rendered.

As you can see, for ResponsiveMode.medium and below, a Panel gets rendered, otherwise it will be a Callout. What you want is the Callout.

You just have to pass in the prop ResponsiveMode.large for it to render the way you want.

import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { ResponsiveMode } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';

render() {
  return (
    <Dropdown
      label='My Label'
      options={myOptions}
      responsiveMode={ResponsiveMode.large}
    />
  );
}
Choobs
  • 218
  • 2
  • 3
  • 10
  • Thanks @choobs for your answer. But I was look at Office UI fabric JS not the Office UI Fabric React component – Sandun Tharaka Jun 28 '18 at 04:57
  • My mistake. If you're not using the React library, it looks like the concept is the [same](https://github.com/OfficeDev/office-ui-fabric-js/blob/master/src/components/Dropdown/Dropdown.ts#L161). Although in this case it will automatically read the window size so I'm not sure how you would override that here without either modifying the source code or using your own css. – Choobs Jun 29 '18 at 19:01