Issue using flex when bring dom in through a content tag

28 views
Skip to first unread message

cat...@gmail.com

unread,
Mar 16, 2015, 6:00:53 AM3/16/15
to polym...@googlegroups.com
Hello!  

I have a project where I am trying to abstract the layout of the app into a custom element.  I have run into an issue where when I use an insertion point into my custom layout tag (<content>) flex seems to no longer work.

I feel like I am missing something incredibly basic here.  While trying to hunt down an answer I ran across this question posted a few months back that shows my exact problem.


I have tried this out and in firefox is looks like all the right css gets attached to all the right places.  Would anyone mind explaining why this does not work?

Thank You. 

Eric Bidelman

unread,
Mar 16, 2015, 12:22:23 PM3/16/15
to cat...@gmail.com, polym...@googlegroups.com
Responded on the SO post: http://stackoverflow.com/questions/25319754/flex-attribute-does-not-work-when-specified-as-light-dom/29081853#29081853

For me, the `flex` attribute was respected. I also made a few tweaks to the code so the insertion point would work correctly.

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 polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/04752e29-e0b3-476d-9fc6-a4881e4ecc79%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

cat...@gmail.com

unread,
Mar 16, 2015, 2:59:29 PM3/16/15
to polym...@googlegroups.com, cat...@gmail.com
Thank you so much for taking the time to look at this issue Eric.

I looked over the solution on SO and that does indeed solve that issue.  I worked through it and I am realising that the SO question is slightly different than mine.

I put together a little example that is displaying the specific issue I was having:

<!doctype html>
<html lang="">

  <head>
  </head>

  <body unresolved fullbleed layout vertical>

    <polymer-element name="top-el" noscript>
      <template>
        <child-el>
          <div id='child-content' header>
            <span>Hello</span>
            <span flex></span>
            <span>world</span>
          </div>
        </child-el>
      </template>
    </polymer-element>

    <polymer-element name="child-el" noscript>
      <template>
        <core-toolbar>
          <content select=[header]></content>
        </core-toolbar>
      </template>
    </polymer-element>

    <top-el></top-el>
  </body>

</html>

If I use the above example it does not flex as I expected, however, I believe this is user error.  In the example above when I set the child-content div to have a style="width:100%" and add the attributes layout and horizontal things work as expected.

<child-el>
  <div id='child-content' style='width:100%' header layout horizontal>
    <span>Hello</span>
    <span flex></span>
    <span>world</span>
  </div>
</child-el>

I can also seem to get things to work as expected by replacing the child-el with the following:

<child-el>
  <span header>Hello</span>
  <span header flex></span>
  <span header>world</span>
</child-el>

This removes the wrapper div and seem to be the preferred way to handle this situation.

as a note I tried adding fit to the child-content div and it seems to mess up some of the styling that core-toolbar applies.

I think that the problem had to do with the way I was thinking about this problem.  I was looking for a way to wrap a set of elements and have them inserted into my content tag.  However, I think the method of adding multiple header attributes to the different sections seems to be the correct way to handle this as it gives me a finer level of control over what goes in and how.

I wanted to document my process a bit in case anyone else runs across a problem like this.

Thanks again for your time.
Reply all
Reply to author
Forward
0 new messages