如何解决如何动态调整vaadin-grid的高度
当前，当我的<vaadin-grid>没有显示数据时，会设置一个高度。想法是让网格高度适应每个api请求正在加载的内容。
我尝试了一些技巧，例如：
-
将网格包裹在父容器中，为父div设置一个设定高度，即
height: 200px;和网格divheight: 100%，以便在父div内动态调整自身。 -
在另一个时间里，我尝试将
height: 100%赋予以下内容：
<html>
<body>
<se-app>
<twitter-dashboard> */ I don't have this tag in my UI /*
and finally <vaadin-grid>
然后
3.最后一个
设置grid.setHeightByRows(true)并为网格主题中id = table的HTML元素设置CSS最大高度。
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.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。