Question

核心列表没有显示（Polymer 0.5.5），我现在不知道如何设置它。

起初我把它的高度：100％放到了所有地方，但是当我想在某个地方使用它时它并不好。滚动错过了。现在我想用flex制作但没有什么可看的......标题只是核心列表丢失了。我应该在代码中更改什么？

<polymer-element name="me-table-list" attributes="items selectedItem mode selectable info minHeight marginTop" layout vertical flex>
    <template>
        <style>
            core-animated-pages {
                position: relative;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }

            .row {
                transition: 0.3s;
                box-sizing: border-box;
                height: 50px;
                border-bottom: 1px solid #ddd;
                padding-left: 15px;
                padding-right: 15px;
                cursor: default;
                background-color: white;
                vertical-align: middle;
            }

            .row:hover {
                background-color: #eee;
                overflow: hidden;
            }

            #container {
                overflow: visible;
                height: 100%;
            }

            .card {
                position: absolute;
                top: -100px;
                left: 0;
                bottom: 30px;
                right: -80px;
                border-radius: 3px;
                z-index: 5;
                text-align: start;
                overflow: hidden;
                background: #fff;
                box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }

            .btn {
                width: 40px;
            }

            #header {
                height: 50px;
                padding-left: 15px;
                padding-right: 15px;
                font-weight: bold;
                border-bottom: 1px solid #ddd;
            }
        </style>
        <me-table-style></me-table-style>
        <core-style ref="me-table-style"></core-style>
        <table-element></table-element>

        <core-media-query query="max-width: 640px" queryMatches="{{phoneScreen}}"></core-media-query>


        <div id="container" layout vertical flex>
            <div layout vertical flex>
                <core-animated-pages selected="{{detailSelector}}" transitions="hero-transition cross-fade" layout vertical flex>
                    <section layout vertical flex>

                        <div hero-p cross-fade hero-transition flex>
                            <paper-shadow style="background-color:white;">
                                <paper-shadow id="header" hero-id="card" class="title" layout horizontal center>
                                    <template repeat="{{title in items.titles}}">
                                        <div class="col-{{title.index}}">
                                            <span>{{title.text}}</span>
                                        </div>
                                    </template>
                                </paper-shadow>
                                <div layout vertical flex style="overflow:auto">
                                    <core-list data="{{items.rows}}" height="120" selection="{{selection}}" flex>
                                        <template>
                                            <div class="row" layout horizontal center hero?="{{selection === model}}">
                                                <template repeat="{{column in model.columns}}">
                                                    <template if="{{column.type === 'text'}}">
                                                        <div class="col-{{column.index}}">
                                                            <span>{{column.text}}  </span>
                                                        </div>
                                                    </template>
                                                    <template if="{{column.type ==='buttonOne'}}">
                                                        <div class="col-{{column.index}}">
                                                            <paper-button raised class="btn" on-tap="{{btnOneClicked}}" label="1">
                                                                {{column.text}}

                                                            </paper-button>
                                                        </div>
                                                    </template>
                                                    <template if="{{column.type ==='checkbox'}}">
                                                        <div class="col-{{column.index}}">
                                                            <paper-checkbox checked="{{column.text}}">
                                                            </paper-checkbox>
                                                        </div>
                                                    </template>
                                                </template>
                                            </div>
                                        </template>
                                    </core-list>
                                </div>
                            </paper-shadow>
                        </div>
                    </section>

                    <section id="details" style="height:100%; width:100%;">
                        <div class="card" hero cross-fade hero-transition>
                            <core-signals on-core-signal-close="{{closeRow}}"></core-signals>

                            <div horizontal hero end-justified layout self-stretch>
                                <paper-icon-button icon="close" on-tap="{{closeRow}}" style="z-index:5;" hero></paper-icon-button>
                            </div>
                            <content item="{{row}}" hero-id="card" selected="[card]" class="content" hero fit> </content>
                        </div>
                    </section>
                </core-animated-pages>
            </div>
        </div>
    </template>

Answer 1

以像素为单位设置核心列表高度。

Polymer Core-List未显示

1 个答案: