How to fix the list of items of the Dropdown Component in a specific div?

Question

I am using the component Dropdown, when I click on the icon I have the list of options, it is a div ms-layer which is add just before the end of body and it is remove when I click on the Dropdown to hide the list of options.

What I want to do, it's to put this div ms'layer in a specific div, for example, just after the div of Dropdown and not just before the end of body.

This is my code :

import * as React from 'react';
import {Dropdown, IDropdownOption} from 'office-ui-fabric-react/lib/Dropdown';

public render(): React.ReactElement<Props> {
return (
  <div>
          <Dropdown placeHolder={'Placeholder'} onChanged={this.handlefunction}
                    options={[
            {key: 'A', text: 'A'},
            {key: 'B', text: 'B'},
            {key: 'C', text: 'C'},]}/>
  </div>);
}

You have to define the selector of the function Layer.setDefaultTarget(selector) — kone, Jun 27 '18 at 09:40

score 0 · Answer 1 · answered Jul 20 '18 at 17:22

There is a boolean down in the calloutProps that lets you turn off that additional layer, so the dropdown will be rendered in the same area of the DOM. https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/Callout/Callout.types.ts#L147

import * as React from 'react';
import {Dropdown, IDropdownOption} from 'office-ui-fabric-react/lib/Dropdown';

public render(): React.ReactElement<Props> {
return (
  <div>
          <Dropdown calloutProps={{doNotLayer:true}} placeHolder={'Placeholder'} onChanged={this.handlefunction}
                    options={[
            {key: 'A', text: 'A'},
            {key: 'B', text: 'B'},
            {key: 'C', text: 'C'},]}/>
  </div>);
}

How to fix the list of items of the Dropdown Component in a specific div?

1 Answers1