Skip to content

Instantly share code, notes, and snippets.

@davidlav

davidlav/app.html

Last active December 12, 2016 23:27
Show Gist options
  • Save davidlav/c96152eb255238c921a636e80c5d5ff2 to your computer and use it in GitHub Desktop.
Save davidlav/c96152eb255238c921a636e80c5d5ff2 to your computer and use it in GitHub Desktop.
Download ZIP
Aurelia Troubleshooting Element Dimesions
Raw
app.html
<template>
<style>
html {
box-sizing:border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
margin: 0;
height: 100vh;
}
.place-holder {
display: flex;
font-size: 18pt;
justify-content: center;
align-items: center;
}
#splash-banner {
height: 100px;
background-color: rgba(255, 0, 0, 0.2);
flex-shrink: 0;
}
#under-splash-banner {
display: flex;
flex-direction: row-reverse;
flex: 1;
width: 100vw;
}
#news-feed {
flex-shrink: 0;
width: 400px;
flex-direction: column;
overflow: auto;
}
#resizable-panels {
display: flex;
flex-direction: column;
width: 100%;
}
#patient-info {
display: flex;
flex: 1;
}
#order-history {
flex: 1;
background-color: rgba(0, 0, 255, 0.1);
overflow-y: auto;
flex-direction: column;
}
#health-status {
flex: 1;
background-color: rgba(0, 0, 255, 0.2);
}
#to-do {
flex: 1;
background-color: rgba(0, 0, 255, 0.3);
}
#timeline {
display: flex;
flex: 1;
}
#timeline-svg {
flex: 1;
border: 1px solid gray;
}
</style>
<p>getBoundingClientRect() on parent div = ${divdim.width} x ${divdim.height}</p>
<p>getBoundingClientRect() on svg node = ${svgdim.width} x ${svgdim.height}</p>
<div class="place-holder" id="splash-banner">Splash Banner</div>
<div id="under-splash-banner">
<div class="place-holder" id="news-feed">News Feed</div>
<div id="resizable-panels">
<div id="patient-info">
<div class="place-holder" id="order-history">Order History</div>
<div class="place-holder" id="health-status">Health Status</div>
<div class="place-holder" id="to-do">To Do</div>
</div>
<div id="timeline" ref="parentdiv">
<svg id="timeline-svg" ref="svgnode"></svg>
</div>
</div>
</div>
</template>
Raw
app.js
export class App {
attached() {
this.divdim = this.parentdiv.getBoundingClientRect();
this.svgdim = this.svgnode.getBoundingClientRect();
console.log(this.bbox);
}
}
Raw
index.html
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body aurelia-app>
<h1>Loading...</h1>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/jspm_packages/system.js"></script>
<script src="https://cdn.rawgit.com/jdanyow/aurelia-bundle/v1.0.3/config.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment