CODEWITHSUNDEEP
javascriptcss-selectorspolymershadow-dom
andrsnn
andrsnn

Reputation: 1621

Polymer, force core-drawer-panel drawer closed on ready

I am attempting to force the drawer of core-drawer-panel closed on polymer ready. Currently I have a core-drawer-panel as part of a custom element I am defining. I have tried the following:

"drawer" is the ID of the core-drawer-panel element.

<core-drawer-panel id="drawer" drawerWidth="155px" touch-action="pan-y" selected="main" narrow>

Polymer({
   ready: function(){
      this.$.drawer.togglePanel();
      this.$.drawer.closePanel();
   }
});

Neither of the two functions above seem to trigger the drawer closed at start, or seem to trigger it at all. They do reference the function correctly. I tried console.log(this.$.drawer.togglePanel); and get the correct function printed. Besides performing some CSS hackery can anyone tell me what I may be doing wrong?

I was able to get this working by forcing narrow layout e.g. forceNarrow="true", but this does not seem to solve my issue efficiently.

EDIT: I have also seen this related post. But forcing responsiveWidth to a large number doesn't seem to solve the problem....

Upvotes: 1

Views: 1198

Answers (2)

vinyll
vinyll

Reputation: 11409

There's a undocumented hidden property.

Just do:

Polymer({
   ready: function(){
      this.$.drawer.hidden = true;
   }
});

Upvotes: 0

LostInBrittany
LostInBrittany

Reputation: 1162

Hmmm, as far as I understand, togglePanel(); and closeDrawer() only work when the core-drawer-panel element is in narrow mode.

To force your component to be in narrow mode, you seem to add the narrowattribute, but as far as I know narrowis only a getter, i.e. to force narrow mode you should use forceNarrow=true

Anyway, the ready() event don't seem the good place to force that kind of behaviour. I tried to do the opposite thing, setting forceNarrow=true and open the drawer on loading. It didn't work with ready() but it worked well with domReady. See element lifecycle methods in the doc : https://www.polymer-project.org/docs/polymer/polymer.html#lifecyclemethods

Hope it helps...

Upvotes: 2

Related Questions