I'm having a lot of trouble getting a core-pages element to have a non-zero
height within my custom element. What is the best practice for having the
core-pages height be the same as its selected content. Here's a trivial
example which clearly breaks:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Polymer</title>
</head>
<body>
<script src="http://www.polymer-project.org/platform.js";></script>
<link rel="import" href=
"http://www.polymer-project.org/components/polymer/polymer.html";>
<link rel="import" href=
"http://www.polymer-project.org/components/core-pages/core-pages.html";>
<polymer-element name="x-foo">
<template>
<core-pages id="pages" selected="{{selected}}">
<content></content>
</core-pages>
</template>
<script>
Polymer('x-foo', {
ready: function() {
this.selected = 0;
}
});
</script>
</polymer-element>
<polymer-element name="x-bar">
<template>
<div><content></content></div>
</template>
<script>
Polymer('x-bar', {});
</script>
</polymer-element>
<p>BEFORE</p>
<x-foo>
<x-bar>some text here</x-bar>
<x-bar>some other text here</x-bar>
</x-foo>
<p>AFTER</p>
</body>
</html>
And the jsbin to see the results: http://jsbin.com/xowoxakuwu/1/edit
(notice how the core pages content overlaps with the next element)
This example shows a core-pages element within a custom element. The
content that gets injected into the core-pages are also custom elements.
Whats the best practice here?
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/30a1533c-9471-4948-b2f2-b82be8b4ebc3%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
