1
我想設置聚合物中的容器元素中一些元素的寬度,該元素不像我期望的那樣工作。下面是一些小例子:在Polymer中設計時考慮父母的寬度/高度
<!doctype html>
<html>
<head>
<base href="https://polygit.org/polymer+:master/webcomponents+:master/shadycss+webcomponents+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<dom-module id="my-container">
<template>
<paper-input label="Test"></paper-input>
</template>
<script>
class MyContainer extends Polymer.Element {
static get is() {
return 'my-container';
}
}
customElements.define(MyContainer.is, MyContainer);
</script>
</dom-module>
<dom-module id="my-element">
<template>
<style>
#pblock {
width: 50%;
}
</style>
<my-container id="pblock"></my-container>
</template>
<script>
HTMLImports.whenReady(function() {
class MyElement extends Polymer.Element {
static get is() { return 'my-element'; }
}
customElements.define(MyElement.is, MyElement);
});
</script>
</dom-module>
<my-element></my-element>
</body>
</html>
予置容器50%的寬度。由於該容器中的紙張輸入設置爲寬度100%,因此我認爲它認爲其父文件的100%,即文檔的50%。 但是,紙張輸入佔用整個寬度,並且不會對容器的50%做出反應。如何設置容器的寬度(或高度),使內部元素(本例中爲紙張輸入)確實將其用作百分比參考?
感謝您的幫助!