Multiselect options are not properly displayed in dialog

[smartsoftware]

I have 6 (will eventually increase) options to show in a multiselect in a dialog (of just 2 inputs -multiselect and inputtext).
Below is my Dialog code :

Code: Select all

<Dialog
                    visible={this.state.itemDialog}
                    style={{ width: "600px", height:"800px" }}
                    header="Category Details"
                    modal
                    className="p-fluid ui-dialog"
                    footer={itemDialogFooter}
                    onHide={this.hideDialog}
                >
                    <div className="p-field">

                        <label htmlFor="attributes">Type </label>
                        <MultiSelect
                            style={{zIndex:0 }}
                            className="ui-dialog-content"
                            name="attributeIds"
                            id="attributes" value={this.state.item.attributeIds}
                            options={this.state.categoryAttributes}
                            optionLabel="name" optionValue="id"
                            onChange={(e) =>this.updateState(e)}
                            placeholder={"Select Attributes"}/>

                    </div>

                    <div className="p-field">

                        <label htmlFor="name">Name </label>
                        <InputText id="name" name="name" type="text" placeholder="Name" value={this.state.item.name} onChange={this.updateState}/>

                    </div>

                </Dialog>

Below are the images of my dialog and multiselect options and how they seem even though I have set zIndex, height and width styles to them. What do I need to do in order to make them appear as they should? Thanks in advance.

[mert.sincan]

Hi,
Sorry for the delayed response! Please try appendTo={document.body} property on MultiSelect

Best Regards,

[smartsoftware]

Thank you @mert.sincan

I have added the below code in my css to solve it, but your solution looks more elegant, thank you. I will use yours.

Code: Select all

.p-dialog {
    overflow: visible;
}
.p-dialog .p-dialog-content {
    overflow: visible;
}

[mert.sincan]

Thanks a lot for the update.

Best Regards,