CODEWITHSUNDEEP
reactjsreact-native
Man Man Yu
Man Man Yu

Reputation: 198

The DropDown Menu in navbar is bounded by the size of Navbar in React nav dropdown reactstrap

I am following this example enter link description here

My navbar was like :

 <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
    <DropdownToggle caret>
      Dropdown Test
    </DropdownToggle>
    <DropdownMenu>
      <DropdownItem disabled>Action</DropdownItem>
      <DropdownItem>Another Action</DropdownItem>
      <DropdownItem divider />
      <DropdownItem>Another Action</DropdownItem>
    </DropdownMenu>
  </Dropdown>

however the dropdown menu in navbar is bounded by the size of navbar, how can it overwrite it? enter image description here

enter image description here

i dont want to adjust the header css like

ul {
height:10rem 
}

to make it works thanks

Edit the code i am working in jsx: is too long to upload here ,

this is the code i move to the codesandbox enter link description here

Thanks

Jeff

Upvotes: 1

Views: 430

Answers (1)

Lith
Lith

Reputation: 1325

Took some time but figured it out. I was right, the issue is css. I fixed the issue in this forked project of yours https://codesandbox.io/s/mystifying-mendeleev-n1709?file=/src/Dashboard.css

The reactstrap is dependent on bootstrap https://reactstrap.github.io/ Simply install bootstrap via npm install --save bootstrap and import it in the main injex.js file cia import 'bootstrap/dist/css/bootstrap.min.css'; fixes majority of the issues.

In addition, removed a lot of your own written css as it was either a) incorrect or b) no longer useful.

The other issues

The reason the header hight was to high because you used height: 5rem on ul element.

The reason drop down menu was hidden was because of the overflow: hidden on the ul element.

Upvotes: 1

Related Questions