I am learninng Polymer (and having fun).
Sometimes though i have working code, but when i try to extract that to an element, it stops working, or gives unexpected results.
Below is an eample where is try to make a 'tall column' element. The code works when put direct in body, but not from template.
What am i missing?
Some Further reading brought up this:
cannot get height 100% to work in polymer elements
so i changed style - and it works ... (How is it that after you post yr question you find the answer in 5 mins, i really tried earlier ...)
<style>
:host {
display: block;
height: 100%;
}
.p_col {
background-color: lightblue;
color: white;
height: 100%;
width: 60px;
}
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<script src="/components/platform/platform.js"></script>
<link rel="import" href="/components/core-item/core-item.html">
<style>
body {
margin: 0;
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
}
</style>
</head>
<body fullbleed unresolved>
<section layout horizontal style="height: 100%">
<section center center-justified style="color: white; height: 100%; width: 60px; background-color: darkblue;">
Tall column - works
</section>
<p-col style="height: 100%">So does this (fixed one) ...</p-col>
<p-col>But this not?</p-col>
</section>
<polymer-element name="p-col">
<template>
<style>
.p_col {
background-color: lightblue;
color: white;
height: 100%;
width: 60px;
}
/* THIS SOLVES IT */
:host {
display: block;
height: 100%;
}
/* THIS SOLVES IT */
</style>
<section class="p_col" center center-justified>
<content></content>
</section>
</template>
<script> Polymer('p-col', {
ready: function() {
},
});
</script>
</polymer-element>
</body>
</html>
