Skip to content

Instantly share code, notes, and snippets.

@kybishop
Created April 19, 2017 01:48
Show Gist options
  • Save kybishop/7502694a39a84ade6be6722ba3efb0ec to your computer and use it in GitHub Desktop.
Save kybishop/7502694a39a84ade6be6722ba3efb0ec to your computer and use it in GitHub Desktop.
Popper.js and resizing
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
.row {
display: flex;
}
.box {
display: flex;
flex-grow: 1;
}
.left {
background-color: red;
width: 80%;
}
.right {
background-color: blue;
width: 20%;
}
.left, .right, .box {
height: 100px;
}
.popper {
position: absolute;
background: #FFC107;
color: black;
border-radius: 3px;
box-shadow: 0 0 2px rgba(0,0,0,0.5);
padding: 10px;
text-align: center;
}
.popper .popper-arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
margin: 5px;
}
.popper .popper-arrow {
border-color: #FFC107;
}
.popper[x-placement^="top"] {
margin-bottom: 5px;
}
.popper[x-placement^="top"] .popper-arrow {
border-width: 5px 5px 0 5px;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
bottom: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.popper[x-placement^="bottom"] {
margin-top: 5px;
}
.popper[x-placement^="bottom"] .popper-arrow {
border-width: 0 5px 5px 5px;
border-left-color: transparent;
border-right-color: transparent;
border-top-color: transparent;
top: -5px;
left: calc(50% - 5px);
margin-top: 0;
margin-bottom: 0;
}
.popper[x-placement^="right"] {
margin-left: 5px;
}
.popper[x-placement^="right"] .popper-arrow {
border-width: 5px 5px 5px 0;
border-left-color: transparent;
border-top-color: transparent;
border-bottom-color: transparent;
left: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
.popper[x-placement^="left"] {
margin-right: 5px;
}
.popper[x-placement^="left"] .popper-arrow {
border-width: 5px 0 5px 5px;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
right: -5px;
top: calc(50% - 5px);
margin-left: 0;
margin-right: 0;
}
<div class="row">
<div class="left"></div>
<div class="right"></div>
</div>
{{#ember-popper class="popper" target=".right"}}
Hello from the right!
<br>
I explicitly target the right div
<div class="popper-arrow" x-arrow></div>
{{/ember-popper}}
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-popper": "0.0.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment