Why core-dropdown-menu not loading the content in <div id="label"> ?

[Jelena Jovanovic]

Hi everyone! :) 

I am working on a online shop project that is built with meteor.js and polymer. Now I just ran into a problem with core-dropdown-menu so I hope someone can help me solve that. 

Here is the code of the dropdown menu:

<core-dropdown-menu class="ulList" label="Choose color">

            <core-dropdown class="dropdown dropColors">

                <core-selector class="menu">

                   {{#each colors}}

                    <core-item class="choose-color">

                        <span id='{{colorCode}}' class='colorChooser' style="background-color: {{colorCode}};"></span>

                    </core-item>

                    {{/each}}

                </core-selector>

            </core-dropdown>

</core-dropdown-menu>

 
So this is how it looks when I open that dropdown menu: http://screencast.com/t/qYI5TXioE6bD those span have the certain color as background and that works outside shadow-root. 

Then, this is how it looks when I choose some color: http://screencast.com/t/F19PtUrkm So it changed the color into blue as you can see on that t-shirt but It didn't placed the blue circle into the <div id="label"></div> 

What could be the problem? Why it don't call the <span> inside shadow-root like it does outside it?

And also check this other dropdown with sizes, it works like it should: http://screencast.com/t/drC9dpWB5EL and here is the code of that dropdown menu:

<core-dropdown-menu class="chSize" label="Choose size">

            <core-dropdown class="dropdown">

                <core-selector class="menu">

                   {{#each sizes}}

                    <core-item>{{size}}</core-item>

                    {{/each}}

                </core-selector>

            </core-dropdown>

</core-dropdown-menu>

The only difference is that in the one that works, inside <core-item> there is only straight call for function and in the one that is not working, inside <core-item> , there is the <span> with call of function in form of background-color.

If you need any information more in order to understand better what could be the problem just tell me and I will provide it.

Thanks in advance!

[Rob Dodson]

I think the difference in your examples is that the first one is putting additional HTML content inside of the <core-item>, whereas the working example only has text inside of <core-item>.

Taking a look at the code for core-dropdown-menu, it seems like when you select something it just tries to grab the text from the selected item.

+ykyyip, is there a feature in core-dropdown-menu which will let it support rich html labels?

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/c60143db-1027-4d5e-8de0-e8bbcb153676%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jelena Jovanovic]

I see.. It would be awesome if it could support it. I am waiting for your response and hope it can be done somehow, because  would like to use as much as possible of polymer elements in the project I am working on.  :)

All the best.