How does height work for core-pages?

aleem....@gmail.com

unread,

Jan 8, 2015, 8:27:01 PM1/8/15

to polym...@googlegroups.com

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?

Dennis Coldwell

unread,

Jan 9, 2015, 3:39:46 AM1/9/15

to polym...@googlegroups.com, aleem....@gmail.com

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

aleem....@gmail.com

unread,

Jan 9, 2015, 12:33:21 PM1/9/15

to polym...@googlegroups.com, aleem....@gmail.com

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>

aleem....@gmail.com

unread,

Jan 9, 2015, 12:41:13 PM1/9/15

to polym...@googlegroups.com, aleem....@gmail.com

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>

Reply all

Reply to author

Forward