Select Dropdown In Popover Hidden (z-index issue)


Topic: Select Dropdown In Popover Hidden (z-index issue)

web_ntx pro premium asked 2 months ago

Expected behavior

Select component rendered inside of a popover component should be on top of the popover

Actual behavior

Select dropdown list is rendered beneath (z-index: 1070) the popover body (z-index: 1080)

Resources (screenshots, code snippets etc.)

import React from 'react';
import { MDBSelect, MDBPopover, MDBPopoverBody } from 'mdb-react-ui-kit';

export default function SelectPopover() {
return (
 <MDBPopover outline btnChildren='Popover' placement='bottom'>
  <MDBPopoverBody>
    <MDBSelect
      data={[
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
      ]}
      label='Select'
    />
  </MDBPopoverBody>
</MDBPopover>
);}

screenshot select in popover


web_ntx pro premium answered 2 months ago

For those seeking a temporary solution, add this to your main css stylesheet.

.popover {
  z-index: 1070;
}

Krzysztof Wilk staff answered 2 months ago

Hi!

Thanks for reporting that. We'll fix this issue in the next release :)

Keep coding!


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 1.0.0-beta6
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No