Polymer 1.0 hidden$="{{show}}" not working

Question

Im trying to create a toggleable menu, but for some reason the hidden attribute won't work. It won't work for either value so I don't think its a data binding problem.

I'm using this method in other parts of my project and in other javascript liberies and frameworks it never gets any more complex, so I can't see what i'm doing wrong.

Any ideas?

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../bower_components/paper-item/paper-item.html">


<dom-module id="user-account-menu">

    <template>

        <style>
            img {
                width: 72px;
                height: 72px;
            }
            paper-menu {
                position: absolute;
                right: 15px;
                width: 200px;
                background: #A3A3A3;
            }
        </style>


        <firebase-auth
            id="auth"
            signed-in="{{signedIn}}"
            user="{{user}}">
        </firebase-auth>


        <!-- start the account dropdon -->
        <div>
            <img src="{{computePhotoURL()}}">

            <paper-menu hidden$="{{show}}">
              <paper-item>This is a menu item</paper-item>
              <paper-item>[[show]]</paper-item>
            </paper-menu>
        </div>

    </template>

    <script>
        Polymer({
            is: 'user-account-menu',

            properties: {
                show: {
                    type: Boolean,
                    value: true
                }
            },

            computePhotoURL: function() {
                // get the users photo, if one doesn't exist, 
                // get the default user avatar
                var photo;

                try {
                    photo = this.user.photoURL;
                    return photo;
                } catch(err) {
                    return 'https://developers.google.com/experts/img/user/user-default.png';
                }
            },
        });
    </script>

</dom-module>

update (css of paper-menu from dom):

element.style {
}
<style>…</style>
paper-menu {
    position: absolute;
    right: 15px;
    width: 200px;
    background: #A3A3A3;
}
<style>…</style>
:host {
    display: block;
    padding: 8px 0;
    background: #ffffff;
    color: #212121; 

Anglican

Did you investigate the DOM and check whether the hidden attribute gets added removed? – Hoarding

It does have one <paper-menu role="menu" tabindex="0" hidden=""> – Anglican

And when you toggle the value to get it removed, does it get removed? – Hoarding

The value changes but nothing is hidden or shown but togging does remove and show the hidden attribute in the DOM – Anglican

Changing the value doesn't do anything. hidden is a boolean attribute and only gets disabled when it is removed. hidden="false" and hidden="true" are exactly the same thing. – Hoarding

When true, i have: <paper-menu role="menu" tabindex="0" hidden="">, when false, i have: <paper-menu role="menu" tabindex="0"> – Anglican

Manually adding a false or true to the attribute via chrome developer tools has no change. – Anglican

What browser are you using? Is some CSS display setting applied to this element? – Hoarding

Google Chrome, latest update – Anglican

Yeah theres is a display:block inherited from :host, and removing that properties looks like it will fix it – Anglican

How can I set the style for the component so that it has no value for display? – Anglican

Check the devtools first if there is some CSS that applies a value for display. – Hoarding

the css I have is is the question – Anglican

The display block probably breaks the hidden. I'd suggest using template dom-if instead or add/remove a hidden class and a CSS rule .hidden { display: none; }. – Hoarding

There is, it comes from the styling in the paper-menu.html file, removing it fixes the problem, is their i way i can override the property in my new user-account-menu component as not to edit the source of a imported component. – Anglican

Removing that style probably breaks the component. Use rather one of my suggestions in my previous comment. – Hoarding

Answer 1

The display: block setting of the paper-menu component breaks the hidden functionality.

Using the hidden attribute is considered bad practice anyway because exactly this issue you just run into. It conflicts with the display setting.

I'd suggest using

• <template dom-if="..." or
• add/remove a hidden class and a CSS rule .hidden { display: none; } (this also works in IE9 which doesn't recognize the hidden attribute.

Batten

This works <template is="dom-if" if="{{show}}"> <paper-menu> .... thanks for the help! – Anglican

Answer 2

Another option is just to add this to your styles:

<style>
  [hidden] {
    display: none !important;
  }
</style>

Graffito

What would be needed for that to be applied? <some-element hidden>? – Anglican

It fixed my problem, thank you very much. But how would I avoid the problem? What I mean is that the !important is overriding a previous display for hidden, so how would I set the display: none in the root of the problem? I say that because I'm not totally comfortable with !importants, I feel that I'll have problems in the future. – Marathon

Answer 3

try removing the ? from the hidden?="{{show}}"

Pauperism