代码之家 › 专栏 › 技术社区 › vishnu

基于css的vaadin网格表格列宽控制

polymer-2.x css html

vishnu · 技术社区 · 6 年前

在我的 聚合物2.0 我正在使用的项目 瓦丁网格#3.0.2 . 有一个网格包含大量的数据-20+列,因此在div中有一个overflow-y滚动。母公司有一个 display: flex 属性,以便自动生成列的宽度。 我们可以设置CSS列的最小宽度吗?或者我可以用CSS控制它吗?

无法在此处重现问题代码,因为数据来自外部服务器(Oracle VM VirtualBox)。

以下是HTML中使用的代码:

<vaadin-grid class="projectworksheet" name="worksheet" items="[[projectData]]" page-size="10"></vaadin-grid>

下面是渲染网格的截图,vaadin网格自动生成 <vaadin-grid-table id="scroller"> 在下面 #shadow-root 我想,这就是为什么我不能控制列 min-width 使用CSS。

1 回复 | 直到 6 年前

Chris Gunawardena 6 年前

单独使用CSS无法跨越阴影dom边界,这意味着您无法从vaadin网格组件外部设置宽度,除非它们提供mixin或CSS变量。

但是,您可以使用javascript访问shadowDom内部的元素并设置它们的css属性。如: document.querySelector('vaadin-grid.projectworksheet').shadowRoot.querySelector('vaadin-grid div.col').style.width = '100px'

推荐文章

Kuba Å imonovský · Templatizer-如何多次渲染同一模板,Polymer 2。十、

7 年前

Bernd Hopp · 使用Vaadin 10双向绑定纸张单选组/纸张单选按钮值

7 年前

Nikhil Raghavendra · Polymer 2.0数据绑定不工作

7 年前

Mulgard · 如何在dom repeat中呈现html实体符号?

7 年前

yberg · 使用nginx反向代理服务聚合物PWA

7 年前

yberg · 聚合物2.0中的全局功能

7 年前

Sikander · 为什么我的polymer应用程序中的视图没有加载?

7 年前

Andrew See · 如何设置`<铁名单网格>`

7 年前

Johan Byrén · 聚合物2。在iron ajax响应后更改其他html页面(iron页面)上的值

7 年前

Johan Byrén · 翻译纸张输入标签

7 年前