ember-paper
ember-paper copied to clipboard
ember-basic-dropdown-wormhole hidden behind
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:
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
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;
}
running into same issue too, the temp fix works, and i dont have ember-power-select
using ember-power-select or extend the power select may work