Polymer: core-dropdown-overlay update size on model change
Question
When I use the paper-menu-button to create a overlay with paper-items I noticed that the size of the resulting core-dropdown is calculated on first open.
When I then update my template model that is bound with auto-binding I do get new paper-items but the size of my overlay remains the same size as on first opening.
Is there a way to get a auto-resize on model change for such overlays?
This is my code:
<div class="toolbar toolbar-1" layout horizontal center>
<paper-menu-button icon="settings-cell">
<template repeat="{{devices}}">
<paper-item>{{devicename}}</paper-item>
</template>
</paper-menu-button>
</div>
<script>
scope = document.querySelector('template[is=auto-binding]');
scope.devices = [{"devicename": "No device"}];
</script>
When I then manually change scope.devices to [{"devicename": "No device"}, {"devicename": "Device 1"}] and already have opened the menu before, I have to scroll in the overlay.
1 answers
solution1
2 ACCPTED 2014-10-13 16:37:33
I got answer from IRC:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="http://www.polymer-project.org/components/platform/platform.js"></script>
<link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-item/paper-item.html">
<link rel="import" href="http://www.polymer-project.org/components/paper-menu-button/paper-menu-button.html">
<link rel="import" href="http://www.polymer-project.org/components/core-icons/core-icons.html">
<polymer-element name="x-test">
<template>
<h1>{{title}}</h1>
<paper-menu-button id="a" icon="menu">
<template repeat="{{devices}}">
<paper-item>{{devicename}}</paper-item>
</template>
</paper-menu-button>
<button on-tap="{{add}}">Add</button>
</template>
<script>
Polymer('x-test', {
devices: [{devicename: "abc"}, {devicename: "def"}],
add: function() {
this.devices.push({devicename: "more"});
var el = this.querySelector("::shadow paper-menu-button::shadow core-dropdown::shadow core-dropdown-overlay");
el.target.style.width = null;
el.target.style.height = null;
},
created: function() {
this.title = document.title;
}
});
</script>
</polymer-element>
</head>
<body>
<x-test></x-test>
</body>
</html>
It seems to be a bug in core-dropdown-overlay. resetting target.style.width and height seems to make it work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.