ember-basic-dropdown-wormhole hidden behind

[jmonster]

tl;dr the following css property fixes my issue:

#ember-basic-dropdown-wormhole {
  z-index: 100;
  position: relative;
}

but it feels wrong/hacky..? The value 100 is the smallest that resolved the issue.

---

I'm attempting to use paper-select:

{{#paper-select
  disabled=disableModelSelect
  label="Model"
  options=deviceModels
  selected=selectedModel
  onChange=(action 'foo') as |thing|}}
  {{thing.abbrev}}
{{/paper-select}}

However, nothing is appearing on my screen. After trial/error I found that I could partially reveal the menu by removing this css rule from my application:

body > [class="ember-view"] {
  height: 100%;
}

Here's a quick demo of what that alone yields:

You'll notice a chunk is clipped -- that's where body > [class="ember-view"] ends and the menu is revealed. But the part that is missing is being clipped because the root ember-view is on top of it. With the css adjustment mentioned at be ginning of this issue I correctly see the following:

[Subtletree]

Looks like it might be this: #711

Have you got ember-power-select or ember-power-calendar in your apps dependencies?

At the moment ember-paper uses an older version of ember-power-select (v1.2). Try using the same version in your app

[jmonster]

nah...

"devDependencies": {
    "broccoli-asset-rev": "^2.4.5",
    "ember-ajax": "^3.0.0",
    "ember-burger-menu": "^2.0.1",
    "ember-cli": "2.13.2",
    "ember-cli-app-version": "^3.0.0",
    "ember-cli-autoprefixer": "^0.6.0",
    "ember-cli-babel": "^6.0.0",
    "ember-cli-dependency-checker": "^1.3.0",
    "ember-cli-deploy": "^1.0.0",
    "ember-cli-deploy-firebase-pack": "^0.3.2",
    "ember-cli-eslint": "^3.0.0",
    "ember-cli-gravatar": "^3.8.3",
    "ember-cli-htmlbars": "^1.1.1",
    "ember-cli-htmlbars-inline-precompile": "^0.4.0",
    "ember-cli-inject-live-reload": "^1.4.1",
    "ember-cli-qunit": "^4.0.0",
    "ember-cli-sass": "^6.2.0",
    "ember-cli-shims": "^1.1.0",
    "ember-cli-sri": "^2.1.0",
    "ember-cli-uglify": "^1.2.0",
    "ember-composability": "^0.3.8",
    "ember-cordova": "^0.4.11",
    "ember-data": "^2.13.0",
    "ember-export-application-global": "^2.0.0",
    "ember-i18n": "^5.0.1",
    "ember-load-initializers": "^1.0.0",
    "ember-material-design-icons-shim": "^0.1.11",
    "ember-new-computed": "^1.0.3",
    "ember-paper": "^1.0.0-alpha.19",
    "ember-promise-helpers": "^1.0.3",
    "ember-resolver": "^4.0.0",
    "ember-route-action-helper": "^2.0.3",
    "ember-source": "~2.13.0",
    "ember-truth-helpers": "^1.3.0",
    "ember-welcome-page": "^3.0.0",
    "emberfire": "^2.0.7",
    "loader.js": "^4.2.3",
    "torii": "^0.9.5"
  },

I'm also having the same issue trying to use paper-dialog which I solved with:

md-backdrop.md-opaque.md-default-theme, md-backdrop .md-opaque {
  z-index: 100;
}

.md-dialog-container {
  z-index: 100;
}

And for completeness, here is the only other css in my project that could possibly be of any consequence (I just started on this project so it's minimally developed):

body > [class="ember-view"] {
  height: 100%;
}

.ember-burger-menu .bm-outlet .bm-content {
  display: flex;
  flex-direction: column;
}

.ember-burger-menu.left .bm-menu {
  overflow: scroll;
}

[RedTn]

running into same issue too, the temp fix works, and i dont have ember-power-select

[jayzhou3]

using ember-power-select or extend the power select may work