Multiselect options are not properly displayed in dialog

UI Components for React
Post Reply
smartsoftware
Posts: 3
Joined: 19 Dec 2020, 16:21

19 Dec 2020, 16:40

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.
ImageImage

mert.sincan
Posts: 4569
Joined: 29 Jun 2013, 12:38

23 Dec 2020, 02:09

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

Best Regards,

smartsoftware
Posts: 3
Joined: 19 Dec 2020, 16:21

24 Dec 2020, 01:38

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

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest