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>
<script
src="https://www.polymer-project.org/0.5/webcomponents.min.js";></script>
<link rel="import"
href="https://www.polymer-project.org/0.5/components/core-toolbar/core-toolbar.html";>
</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.
On Monday, March 16, 2015 at 9:22:23 AM UTC-7, Eric Bidelman wrote:
>
> 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.
>
> On Mon, Mar 16, 2015 at 3:00 AM <[email protected] <javascript:>> wrote:
>
>> 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.
>>
>>
>> http://stackoverflow.com/questions/25319754/flex-attribute-does-not-work-when-specified-as-light-dom
>>
>> 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.
>>
>> 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] <javascript:>.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/04752e29-e0b3-476d-9fc6-a4881e4ecc79%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/polymer-dev/04752e29-e0b3-476d-9fc6-a4881e4ecc79%40googlegroups.com?utm_medium=email&utm_source=footer>
>> .
>> For more options, visit https://groups.google.com/d/optout.
>>
>
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/a74b0dbd-4e3d-440a-a921-41af57bdaa16%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
