Unable to get elements from the footer to float over the main content

ionic-v1
1

I’m trying to get autocomplete functionality for an input in the footer.
Being in the footer, I would like the autocomplete “dropdown” to appear above the element, over the main content.
I’m trying to use Twitter’s typeahead.js for this, but I’m having some trouble.

I’ve been able to move the dropdown to above the given input, but even with a high z-index, it still appears below the main content and I’m not sure why.

I’ve created a Plunk to show what I mean and would grateful for any help!

2

Hi @stevenocchipinti, there’s an “overflow hidden” css style you have to remove to see your .tt-dropdown-menu:

.item-input-inset {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  align-items: center;
  position: relative;
  /* overflow: hidden; */
  padding: 10.66667px;
}

You can find it in ionic.css at line 5205.

3

Thank you very much @xAlien95!!
Such a simple fix, you can tell I’ve been staring at this for too long :stuck_out_tongue:

I’ve updated the plunk for anyone who may find this in the future.