【发布时间】：2024-05-21 14:35:01
【问题描述】：
我正在尝试将core-list 元素放在聚合物中的<paper-tabs> 上的 100% 高度。
不幸的是，当我试图通过此链接* Height on Core-list 的评论解决我的问题时，我的核心列表高度为 80 像素，我无法将高度设置为更大的值。
我的代码如下：
<polymer-element name="progress-page" attributes="hash">
<template>
<link rel="stylesheet" href="../assets/css/styles.css">
<link rel="stylesheet" href="../assets/css/menu-card.css">
<sidebar-layout selected="main-page">
<div class="title">Report</div>
<div class="page-holder" horizontal layout center center-justified>
<div class="page-sub-title">Progress</div>
</div>
<paper-tabs selected="{{selected}}">
<paper-tab>Tab 1</paper-tab>
<paper-tab>Tab 2</paper-tab>
</paper-tabs>
<core-pages selected="{{selected}}">
<div>
<div class="content" fit style="overflow:auto;">
<core-list data="{{data}}" fit height="120" style=" height: 100%;">
<template>
<div class="row" layout horizontal center>
<div data-index="{{index}}">{{model.name}}</div>
</div>
</template>
</core-list>
</div>
</div>
<div>
Page 2 qasdasd
</div>
</core-pages>
</sidebar-layout>
</template>
<script>
Polymer('progress-page', {
ready: function () {
this.selected = 0;
this.data = generateContacts();
function generateContacts() {
var data = [];
for (var i = 0; i < 1000; i++) {
data.push({
name: 'dddd',
string: 'asd'
});
}
return data;
};
}
});
</script>
我尝试了第二种解决方案，但仍然无法正常工作，代码如下。我必须以像素为单位制作高度才能看到核心列表，有人可以帮我吗？
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="../bower_components/core-list/core-list.html">
<link rel="import" href="../bower_components/core-pages/core-pages.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../bower_components/core-animated-pages/transitions/slide-from-right.html">
<polymer-element name="progress-page" attributes="hash">
<template>
<style>
:host {
display: block;
height: 100%;
}
core-list .row {
height: 90px;
padding: 15px;
}
</style>
<link rel="stylesheet" href="../../assets/css/styles.css">
<link rel="stylesheet" href="../../assets/css/menu-card.css">
<sidebar-layout selected="main-page">
<div class="title">Report</div>
<div class="page-holder" horizontal layout center center-justified>
<div class="page-sub-title">Progress</div>
</div>
<div class="page-holder" horizontal layout center center-justified>
<section layout vertical is="auto-binding">
<paper-tabs selected="{{ selected }}" selectedindex="0" horizontal center layout>
<paper-tab inline flex center-center horizontal layout active>Terazniejszy miesiac</paper-tab>
<paper-tab inline flex center-center horizontal layout>Archiwum</paper-tab>
</paper-tabs>
<core-animated-pages selected="{{ selected }}" selectedindex="0" notap>
<section active one fit layout style="height:auto;">
<list-test layout vertical>
<div class="page-holder" horizontal layout center center-justified>
<p class="progress-title">Summary</p>
</div>
<div class="page-holder" horizontal layout center center-justified>
<div class="page-holder progress-sumarry-color " horizontal layout center
center-justified>
<div>Month</div>
<div flex>+ x persons</div>
<div>+ x points</div>
</div>
</div>
<core-list id="app" data="{{data}}" height="80" style="will-change: transform; overflow-y: auto;height:1000px;">
<template>
<div class="row">
List row: {{index}}, User data from model: {{model.name}}
<input type="checkbox" checked="{{model.checked}}">
</div>
</template>
</core-list>
</list-test>
</section>
<section one flex horizontal layout>
</section>
</core-animated-pages>
</section>
</div>
</sidebar-layout>
</template>
<script>
Polymer('progress-page', {
ready: function () {
selected: 0;
var app = this.shadowRoot.getElementById("app");
app.data = generateContacts();
var template = this.shadowRoot.getElementById("templ");
function generateContacts() {
var data = [];
for (var i = 0; i < 88; i++) {
data.push({
name: 'dddd',
string: 'asd',
cardID: 'icard-' + Math.floor(Math.random() * (1000 - 1 + 1) + 1)
});
}
return data;
};
},
handleResponse: function (oldValue) {
if (this.response == 1) {
}
else {
window.localStorage.setItem("hash", '');
document.querySelector('app-router').go('/login?error=tokenTimeout');
}
},
}
);
</script>
</polymer-element>
<progress-page></progress-page>
【问题讨论】：