SOlved. I think the issue is that the core-pages element is not inherting
the height of the selected page. Adding this style to the x-foo element did
the trick:
<style>
::content > .core-selected {
position: relative;
display: block;
}
</style>
On Friday, January 9, 2015 at 9:33:21 AM UTC-8, [email protected] wrote:
>
> 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/08a11656-4d5b-439b-b6ad-6a84b6f3e14c%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
