That doesn't seem to be doing the trick. Here's the edited http://jsbin.com/xowoxakuwu/2/edit
This issue seems like something specific to <core-pages> On Friday, January 9, 2015 at 12:39:46 AM UTC-8, Dennis Coldwell wrote: > > Aleem, try setting a vertical layout to your x-foo element, here's an > example: > > <p>BEFORE</p> > <x-foo vertical layout> > <x-bar>some text here</x-bar> > <x-bar>some other text here</x-bar> > </x-foo> > <p>AFTER</p> > > You can understand more about Polymer's layout attributes here: > https://www.polymer-project.org/docs/polymer/layout-attrs.html > > If you want to take a deep-dive and learn about Flexbox (which ultimately > is what is powering those layout attributes) I like this guide > http://css-tricks.com/snippets/css/a-guide-to-flexbox/ > > --Dennis > > > On Thursday, January 8, 2015 at 5:27:01 PM UTC-8, [email protected] > wrote: >> >> 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/437343b8-a2cd-4ac2-95b6-ef4afb14e118%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
