Javascript 如何动态调整vaadin网格的高度_Javascript_Css_Gridview_Vaadin Grid_Row Height

Javascript 如何动态调整vaadin网格的高度

javascript css gridview

Javascript 如何动态调整vaadin网格的高度,javascript,css,gridview,vaadin-grid,row-height,Javascript,Css,Gridview,Vaadin Grid,Row Height,当前，当my显示无数据时，有一个设定的高度。其思想是使网格高度调整到从每个api请求加载的内容我尝试了一些技巧，例如：将网格包装在父容器中，为父div提供一个设置的高度，即高度：200px和网格div高度：100%，以便在父div内动态调整自身在另一段时间里，我尝试将高度：100%给予以下人员： <html> <body> <se-app> <twitter-dashboard> */ I don't have this tag in m

当前，当my

显示无数据时，有一个设定的高度。其思想是使网格高度调整到从每个api请求加载的内容

我尝试了一些技巧，例如：

将网格包装在父容器中，为父div提供一个设置的高度，即

高度：200px

和网格div

高度：100%

，以便在父div内动态调整自身

在另一段时间里，我尝试将高度：100%给予以下人员：

<html>
<body>
<se-app>
<twitter-dashboard> */ I don't have this tag in my UI /*
and finally <vaadin-grid>


This is my grid

        <vaadin-grid id="unknownProfileGrid" on-active-item-changed="_onActiveItemChanged"  title="UNKNOWN AGENT QUEUE" aria-label="UNKNOWN AGENT QUEUE" items="{{_dealItems}}"  selected-items="{{selectedItems}}" size="250" style="height:100%">
            <template class="row-details">
                <div class="details" >
                    <div class="row">
                        <div class="column" >
                            <div class="deal-item"><strong>Deal No:</strong></div>
                            <div class="deal-item"><strong>Term:</strong></div>
                            <div class="deal-item"><strong>TPV Status:</strong></div>
                            <div class="deal-item"><strong>Contract Status:</strong></div>
                        </div>
                        <div class="column" >
                            <div class="deal-item">{{_dealContractItems.contractNumber}}</div>
                            <div class="deal-item">{{_dealContractItems.term}}</div>
                            <div class="deal-item">{{_dealContractItems.tpvStatus.name}}</div>
                            <div class="deal-item">{{_dealContractItems.contractStatus.name}}</div>
                        </div>
                    </div>
                </div>
            </template>
            <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
            <vaadin-grid-column>
                <template class="header">
                    <vaadin-grid-sorter title="DAYS OUTSTANDING" path="name">DAYS OUTSTANDING</vaadin-grid-sorter>
                </template>
                <template>
                    <span title="{{item.daysOutstanding}} days">{{item.daysOutstanding}} days</span>
                </template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">
                    <vaadin-grid-sorter title="BUSINESS TYPE" path="term">BUSINESS TYPE</vaadin-grid-sorter>
                </template>
                <template>
                    <span title="{{item.businessType}}">{{item.businessType}}</span>
                </template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">
                    <vaadin-grid-sorter title="EFFECTIVE START DATE" path="{{effectiveStartDate}}">EFFECTIVE START DATE</vaadin-grid-sorter>
                </template>
                <template>
                    <span title="{{item.effectiveStartDate}}">{{item.effectiveStartDate}}</span>
                </template>
            </vaadin-grid-column>

            <vaadin-grid-column>
                <template class="header">
                    <vaadin-grid-sorter title="DEAL NO" path="contractNumber">DEAL NO</vaadin-grid-sorter>
                </template>
                <template>
                    <span title="{{item.contractNumber}}">{{item.contractNumber}}</span>
                    <!--<a href="#" title="{{item.contractNumber}}" on-click="_openDeal"> {{item.contractNumber}}</a>-->
                </template>
            </vaadin-grid-column>
        </vaadin-grid>
    </div>


Please if anyone has any ideas I really appreciate your help on this.