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

web_ntx premium asked 2 years 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'>
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },
        { text: 'Option' },

screenshot select in popover

web_ntx premium answered 2 years ago

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

.popover {
  z-index: 1070;

Krzysztof Wilk staff answered 2 years ago


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

Keep coding!

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Premium
  • 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