Question

我试图将数据网格封装在一个带有三个堆叠div的自定义组件中，中间的一个用作增长div。中间div增长但网格只显示标题，没有视口，没有行。

＆＃13;

<!DOCTYPE html>
<dom-module id="vertical-datagrid">
    <template>
        <style include="bwu-datagrid-default-theme">
            :host {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
                background: lightblue;
                margin: 0;
                padding: 0;
                display: flex;
                flex-direction: column;
                flex: 1;
                justify-content: flex-start;
                align-items: stretch;
                align-content: stretch;
                overflow: hidden;
                word-wrap: break-word;
                width: auto;
                height: 100%;
                /*
                height: calc(100% + 15px);
                height: -moz-calc(100% + 15px);
                height: -webkit-calc(100% + 15px);
                */
            }
            #myGrid {
                --bwu-datagrid: {
                    width: auto;
                    height: 100%;
                    opacity: 1;
                    transition: opacity 200ms;

                    background: white;
                    outline: 0;
                    border: 1px solid gray;
                };
            }
            #gridHeaderDiv {
                padding: 0;
                margin: 0;
                width: auto;
                height: 20px;
                background-color: lightgoldenrodyellow;
            }
            #gridDiv {
                width: 100%;
                test-decoration: none;
                overflow: hidden;
                flex: 1 1 auto;
                background-color: lightsalmon;
            }
            #footerDiv {
                background-color: lightpink;
                height: 20px;
                width: 100%;
            }
        </style>
        <div id="gridHeaderDiv">
            Top Header
        </div>
        <div id="gridDiv">
            <bwu-datagrid grid id="myGrid"
             theme="bwu-datagrid-default-theme">
            </bwu-datagrid>
        </div>
        <div id="footerDiv">
            Footer
        </div>
    </template>
</dom-module>
</html>

＆＃13;

这是网格的外观：

我还为调整大小添加了这个，这非常有效：

dom.window.onResize.listen((dom.Event e) => grid.resizeCanvas(e));

我设法实现这一目标的唯一方法是删除＆＃34; gridDiv＆＃34;嵌套并简单地将网格放在页眉/页脚div之间。

bwu_datagrid +聚合物1：网格不会在flexbox

0 个答案: