开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当CSS用于列宽时，Vaadin 8网格滚动条的行为不稳定

基础概念

Vaadin 8 是一个用于构建现代 Web 应用程序的 Java 框架。它使用 GWT（Google Web Toolkit）来编译 Java 代码为 JavaScript，从而在浏览器中运行。Vaadin 8 提供了一个强大的网格组件（Grid），用于显示和编辑表格数据。

CSS（Cascading Style Sheets）是一种样式表语言，用于描述 HTML 或 XML（包括 SVG 和 XHTML）文档的外观和格式。

相关优势

灵活性：CSS 提供了丰富的样式选项，可以精确控制布局和外观。
可维护性：通过外部样式表，可以集中管理样式，便于维护和更新。
性能：CSS 可以被浏览器缓存，减少重复加载，提高页面加载速度。

类型

内联样式：直接在 HTML 元素中使用 style 属性。
内部样式表：在 HTML 文档的 <head> 部分使用 <style> 标签。
外部样式表：通过 <link> 标签引用外部 CSS 文件。

应用场景

CSS 在 Vaadin 8 网格中的应用场景包括：

设置列宽
设置行高
设置单元格样式
设置网格整体样式

问题描述

当使用 CSS 设置列宽时，Vaadin 8 网格的滚动条行为可能会变得不稳定。这通常是由于 CSS 样式与网格组件的内部逻辑冲突导致的。

原因

CSS 样式冲突：可能存在其他 CSS 样式影响了网格的布局和滚动条行为。
网格组件内部逻辑：Vaadin 8 网格组件在处理列宽和滚动条时可能存在一些 bug 或未优化的逻辑。

解决方法

检查 CSS 样式：确保没有其他 CSS 样式影响到网格的布局和滚动条行为。可以使用浏览器的开发者工具（如 Chrome 的 DevTools）来检查和调试样式。
检查 CSS 样式：确保没有其他 CSS 样式影响到网格的布局和滚动条行为。可以使用浏览器的开发者工具（如 Chrome 的 DevTools）来检查和调试样式。
更新 Vaadin 版本：如果使用的是较旧的 Vaadin 8 版本，尝试更新到最新版本，可能已经修复了相关问题。
自定义滚动条样式：如果滚动条行为仍然不稳定，可以尝试自定义滚动条样式。
自定义滚动条样式：如果滚动条行为仍然不稳定，可以尝试自定义滚动条样式。
使用 JavaScript 调整：如果 CSS 无法解决问题，可以尝试使用 JavaScript 来调整网格的布局和滚动条行为。
使用 JavaScript 调整：如果 CSS 无法解决问题，可以尝试使用 JavaScript 来调整网格的布局和滚动条行为。

参考链接

通过以上方法，应该能够解决 Vaadin 8 网格在使用 CSS 设置列宽时滚动条行为不稳定的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

小智在这3年开发中遇到的 CSS 问题及解决方案，有大佬帮他总结好了！

当 Flex 项目的数量是动态的时，不要使用justify-content: space-between 当将justify-content: space-between应用于flex容器时，它将分配元素并在元素之间留出相等的空间...我们的示例有8个卡片项，它们看起来不错。如果，由于某种原因，项目的数量是7呢?第二行元素看起来与第一行不同。 ? ? 在这种情况下，使用CSS网格会更合适。...长单词和链接当在移动屏幕上阅读一篇文章时，一个长单词或内联链接可能会导致出现水平滚动条。使用CSS word-break可以防止这种情况的发生 ?...网格中auto-fit和auto-fill之间的差异的误解在CSS grid中，repeat函数可以创建响应列布局，而不需要使用媒体查询。...简而言之，auto-fill将在不扩展列宽的情况下对列进行排列，而auto-fit只会在列为空的情况下将列折叠到零宽度。 8.

3.7K1 0

学前端到了CSS阶段，你一定要掌握这9大防御式开发技能

我们在CSS布局时，是按照设计师的效果来开发的，但是实际的网页内容是动态的，网页上的内容是可以改变的，如：文字数量，图片尺寸、窗口大小等，再加上用户的一些意想不到的行为和运行环境，从而造成CSS布局的效果并没有按照我们预期的效果显示...三、9个具有防御式的CSS代码① ：场景一：单行文本过长我们设计时的理想效果是标题文字不超过8个字，正好显示完整。但实际应用时，有可能标题内容过长造成换行显示。...但是这里更推荐将 6、场景六：预留滚动条空间，避免重排当内容不足时不会出现滚动条，文字占据的宽度要宽些。...当内容溢出出现滚动条时，因为滚动条要占据一部分空间，则会造成文字占据的空间变窄，因而会造成重排。... 7、场景七：锁定滚动链我们会发现当子元素滚动到顶部或底部继续滚动滚轮时，会导致父元素的滚动，但这种行为有时会影响页面体验。

1.8K0 0

「译」前端项目中常见的 CSS 问题

image.png 包含 8 个项目的 wrapper (大图预览) image.png 在这种情况下，使用 CSS 网格将会更加合适。 5....CSS 网格布局中关于 auto-fit 和 auto-fill 差异的误解在 CSS 网格布局中，repeat 函数可以在不使用媒体查询的情况下创建响应式列布局。...Sara Soueidan 写了一篇不错的文章讨论过这个问题。 8. 当视窗高度不足时将元素固定在屏幕顶部如果你在视窗不够高的时候将一个元素固定在屏幕顶部，会发生什么事呢？...使用 CSS 网格定义 main 和 aside 元素 CSS 网格可用于定义布局中的 main 部分和 aside 部分，这是 CSS 网格的绝佳用途。...压缩或拉伸图片用 CSS 调整一张图片的大小时，如果纵横比与图片的宽高不一致，则图片会被压缩或拉伸。解决方法很简单：使用 CSS 的 object-fit。

2.1K1 0

DataGridView使用小结

//((DataGridViewImageCell)dataGridView1.Rows[i].Cells["Pic"]).Value = image2; } } } 5).当网格未填充满控件时... int width = 0; //当网格未充满控件时才画线 if (i + j < k) { using (Brush...(e.Value.ToString())); } } 8).打造一个漂亮的DataGridView //样式 dataGridView1.AutoSizeColumnsMode = DataGridViewAutoSizeColumnsMode.None...;//列宽不自动调整,手工添加列 dataGridView1.RowHeadersWidth = 12;//行标题宽度固定12 dataGridView1.RowHeadersWidthSizeMode...;//列标题居中显示但实际的效果总是偏左了一点，原因是列可以进行排序，排序标志符号在列标题上占了空间。

2.3K2 0

防御式CSS是什么？这几点属性重点防御！

.button { min-width: 100px; } 8.忘记 background-Repeat 很多时候，当使用一张大的图片作为背景时，我们往往会忘记考虑设计在大屏幕上观看时的情况。...这个背景只有在图片加载失败时才会显示出来。 12.小心CSS网格中的固定值假设我们有一个包含aside和main的网格。...为了避免这样的问题，在使用上述CSS网格时，一定要使用媒体查询。...这些滚动条通常是不透明的，并从相邻的内容中占用一些空间。请看下图: 请注意，由于显示了滚动条，当内容变长时，它是如何移位的。我们可以通过使用scrollbar-gutter属性来避免这种行为。...一旦使用不当，会导致意外的结果。当使用minmax()函数时，auto-fit关键字将扩展网格项目以填补可用空间。而auto-fill将保留可用的空间，而不改变网格项的宽度。

4.4K3 0

全栈之前端 | 6.CSS3基础知识之网页几种布局方法学习(2)

`) ， column-reverse (`列元素排列的方向相反`) flex-wrap : 当弹性盒子子类元素宽度超过父元素宽度时，使用其 wrap 值可以自动换行。...grid-column 属性：用于指定网格项目`列`的大小和位置，开始与结束的线的序号要使用/符号分开。 grid-column-start 属性：指定网格项在网格`列`中的起始位置。...grid-column-end 属性：指定网格项在网格`列`中的起始位置。 grid-row 属性：用于指定网格项目`行`的大小和位置，开始与结束的线的序号要使用/符号分开。...column-fill - 列平衡元素内容描述: 该CSS属性控制在分解为列时如何平衡元素的内容。...，在CSS发展历史中 web 开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中，现在它通常会被用于兼容一些不支持Flexbox 和 Grid的浏览器。

2782 0

如何使用 Hilla 管理全栈 Java 开发

使用 Lit，可以开发所谓的自定义组件，即 HTML 语言的扩展。模板以声明方式包含在 TypeScript 代码中，也可以添加仅在 Web 组件上下文中有效的 CSS。...人员存储库前端显示人物在客户端，需要一个视图来显示人员数据，它使用Vaadin 网格。...人员被添加到 Vaadin 网格的项目属性中，“路径”属性用于定义人员属性的路径。为简单起见，此示例不使用分页。如果表包含大量记录，则应使用分页来加载数据的子集。...为此，Hilla 使用 Vaadin 路由器（图 15）。hello-world-view首先，导入应用程序启动时显示的视图，在本例中为, 。然后它被映射到根路径和路径hello-world。...更改 JavaScript 或 CSS 文件时，会考虑并自动部署更改。然而，在生产模式下，在构建期间准备一次 JavaScript 和 CSS 文件并让服务器处理所有请求会更高效。

9623 0

低代码如何构建响应式布局前端页面

“你开发的界面为啥在我的屏幕里这么小啊？” “这个界面为啥在我这里会出现横向滚动条啊？” 大家在进行前端界面开发时，有没有遇到这些类似的问题呢？又是如何解决的呢？...网格（Grid）布局网格布局（Grid）是CSS（层叠样式表，为网页添加页面样式的一种计算机语言）布局方案的一种，也是泛用性最广泛的一种。...Grid布局示意图由于网格属于标准的二维布局，因此网格布局将页面划分为“行”与“列”，产生单元格，对单元格的设置与组合，最终形成页面最终的效果。...活字格为用户提供了3种设置模式，分别是固定模式、自适应模式和范围模式，通过设置行高、列宽的调节模式为自适应模式或范围模式，可使页面呈现流式布局，使页面的布局更加灵活。...固定模式固定模式下，行高、列宽为固定的大小，单位为像素，不会随着展示屏幕的变化而变化，如果页面所有被设定了固定模式的行列总像素已经大于了浏览器的宽度/高度，那浏览器中就会出现横向/纵向滚动条。

4K4 0

如何使用Grid中的repeat函数

当浏览器变窄时，"auto"列继续变窄，直到达到min-content阈值。 image.png 在上面的演示中，只有当每一列达到min-content阈值时，div 才会开始溢出容器。...这样，在网格上放置内容时，就可以更容易地定位这些线（因为我们不必去计算网格线）。下面是一个示例。...当这一列的宽度小于 200px 时，div 就会开始溢出其容器。 image.png 我们可以通过引入 min() 来防止溢出，接下来我们就来看看它。...在上图中，你可以看到末端列行的编号仍然是 8，而 8 则堆叠在网格行 7、6 和 5 的上方。那么我们该如何看待这一切呢？...总结 repeat() 函数是一种非常有用的工具，可用于高效布局网格列和行的重复模式。只需一行代码，它就能在不使用媒体查询的情况下创建完全响应式的布局。

5513 0

CSS 中你需要知道 auto 的一切！

’ + ‘margin-right’ = 块的宽度当一个元素的宽度值为auto时，它包含margin、padding和border，不会变得比它的父元素大。...CSS grid 和自动设置一个 auto 列 ? 在CSS Grid中，我们可以设置一个列为auto，这意味着它的宽度将基于它的内容长度。...使用CSS网格时，可以使用自动页边距实现类似于 flexbox 的结果。...当我们有一个网格，并且其中的网格项目具有margin-left: auto时：该项目将被推到右边，其宽度将基于其内容长度考虑下面的例子： ? 当我们希望item1的宽度基于其内容，而不是网格区域。...在 Chrome 窗口中，滚动条总是显示出来，这是不正确和令人困惑的行为。通过使用auto关键字，我们可以确保滚动条不会显示，除非内容高度大于它的容器。根据MDN：取决于用户代理。

5.3K3 0

C#学习笔记——DataGridView功能总结

0) { Clipboard.SetText(dataGridView1.SelectedRows[0].Cells["Title"].Value.ToString()); } 7.自定义列宽...8.打造一个漂亮的DataGridView //样式 dataGridView1.RowHeadersVisible = false; //不显示行标题列 //dataGridView1.AutoSizeColumnsMode.../((DataGridViewImageCell)dataGridView1.Rows[i].Cells["Pic"]).Value = image2; } } } 10.当网格未填充满控件时...int width = 0; //当网格未充满控件时才画线 if (i + j < k) { using (Brush...;//列标题居中显示但实际的效果总是偏左了一点，原因是列可以进行排序，排序标志符号在列标题上占了空间。

2.8K3 0

Adobe dreamweaver CS6小白入门教程「建议收藏」

能在不离开当前网页文档的情况下，为访问者提供信息，和其他。输入函数预览 7.5.空链接用于访问向页面上的对象或者文本附加行为。...9.2.3.添加APDIV**滚动条* 解释：溢出：AP元素面板中溢出用于控制当AP元素的内容超出AP元素的指定大小时如何在浏览器显示AP元素。的显示方法。...visible可见（部分内容）：hidden隐藏（部分内容）：sceoll**滚动条**：auto超出范围的滚动条 左、上是距离页面边界的距离！...宽、高是APDiv大小 Z轴是顺序背景也是针对APDiv的！...，插入表格（宽度100% 间距…），填好文字选中导航栏的一个小格子，窗口–行为–“+”来建立导航栏和下拉菜单的关系（显示–over ；隐藏–out） 10.用CSS修饰美化网页 10.1介绍

7.2K3 0

前端-CSS Grid中的陷阱和绊脚石

如果你使用一个简化版本的浮动12列“网格”，我们必须计算每一列的百分比大小，加上每个列之间间距的百分比大小。要创建跨多个列的项，需要将所有项的宽度加上用于分隔它们的边界宽度。...传给minmax()函数的第一个值，它是网格轨道最小的值，第二个值是网格轨道最大的值。因此，你可以设置200px的行，但通过auto设置为网格轨道最大值，那么当有较多的内容时，不会出现内容溢出。...例如min-content关键词的示例，使用它创建一个网格轨道时，将会创建尽可能小的网格轨道。在我的例子中，这个词意味着其成为最宽的东西，网格轨首缩小以适应它。 ...了解了如何对网格轨道大小进行调整，以及内容将如何改变网格轨道大小，这可能是新手使用CSS Grid布局中会感到最为困惑的事情之一。这需要花一点时间来理解 —— 我们之前没有任何类似的行为。...在很多情况下，隐式和显式网格的渲染行为是相同的，对于很多的布局，你会发现你定义了列，然后允许将行创建为隐式网格。不同的是，当你开始使用负的行号来引用网格的最后一行时，你会发现还是有一定区别的。

4.8K2 0

Java Swing JTable

1 简介 JTable用于显示和编辑常规的二维单元格表。有关面向任务的文档和使用JTable的示例，请参见Java教程中的如何使用表。...因此，在编写TableModel时，不必侦听列重新排序事件，因为无论视图中发生什么，都将在其自身的坐标系中查询模型。...(int rowHeight) // 设置指定行的行高 void setRowHeight(int row, int rowHeight) /** 设置当手动改变某列列宽时，其他列的列宽自动调整模式，...tableColumn.sizeWidthToFit(); // 是否允许手动改变该列的列宽 tableColumn.setResizable(boolean isResizable); // 设置该列的表头名称...注意：该列是按表视图的显示顺序指定的，而不是按TableModel的列顺序指定的。这是一个重要的区别，因为当用户重新排列表中的列时，视图中给定索引处的列将发生变化。

5K1 0

180多个Web应用程序测试示例测试用例

4.仅在必要时才启用滚动条。 5.标题，描述文本，标签，内场数据和网格信息的字体大小，样式和颜色应为SRS中指定的标准。 6.说明文本框应为多行。...4.当至少一个过滤条件选择不是强制性的时，用户应该能够提交页面，并且默认的搜索条件应该用于查询结果。 5.对于过滤条件的所有无效值，应显示正确的验证消息。...4.用于搜索的搜索条件应显示在结果网格中。 5.结果网格值应按默认列排序。 6.排序的列应显示一个排序图标。 7.结果网格应包括所有具有正确值的指定列。...8.升序和降序排序功能应适用于数据排序所支持的列。 9.结果网格应以适当的列和行间距显示。 10.当结果多于每页默认结果数时，应启用分页。 11.检查下一页，上一页，第一页和最后一页的分页功能。...12.重复的记录不应显示在结果网格中。 13.检查所有列是否可见，并在必要时启用水平滚动条。 14.检查数据以获取动态列（其值是根据其他列值动态计算的列）。

8.3K2 1

万字总结 CSS 布局

同时它也使你的CSS变得不那么直观：设置overflow是因为你想要展示滚动条还是仅仅为了获取清除浮动的能力呢？...定位想要把一个元素从正常流中移除，或者改变其在正常文档流中的位置，可以使用CSS中的position属性。当处于正常文档流时，元素的position属性为static。...当页面滚动时，固定的元素会留在相对于视口的位置，而其他正常流中的内容则和通常一样滚动。当你想要一个固定导航栏一直停留在屏幕上时这会非常有效。...它的行为就像 position:relative;而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。...否则其行为与相对定位相同。这个属性值是一个较新的CSS属性，在浏览器兼容性上会差一些，但在不兼容的浏览器中会被忽略并会退到正常的滚动情况。

5.7K2 0

这些CSS的新特性还是有必要进来瞧瞧的

指容容器滚动行为，让滚动效果更丝滑 overscroll-behavior优化滚动边界，特别是可以帮助我们滚动的穿透自定义滚动条的外观默认的window外观和mac外观 windows mac...：当同时有垂直和水平滚动条时交汇的部分 ::-webkit-resizer：某些元素的交汇部分的部分样式（类似textarea的可拖动按钮） html { --maxWidth:1284px;...)函数，允许我们给网格多个列指定相同的值。...它也接受两个值：重复的次娄和重复的值 minmax()函数，能够让我们用最简单的CSS控制网格轨道的大小，其包括一个最小值和一个最大值 auto-fill和auto-fit，配合repeat()函数使用...，可以用来替代重复次数，可以根据每列的宽度灵活的改变网格的列数 max-content和min-content，可以根据单元格的内容来确定列的宽度 grid-suto-flow，可以更好的让CSS Grid

8002 0

每个前端都需要知道这些面向未来的CSS技术

指容容器滚动行为，让滚动效果更丝滑 overscroll-behavior优化滚动边界，特别是可以帮助我们滚动的穿透自定义滚动条的外观默认的window外观和mac外观 windows mac...：当同时有垂直和水平滚动条时交汇的部分 ::-webkit-resizer：某些元素的交汇部分的部分样式（类似textarea的可拖动按钮） html { --maxWidth:1284px;...)函数，允许我们给网格多个列指定相同的值。...它也接受两个值：重复的次娄和重复的值 minmax()函数，能够让我们用最简单的CSS控制网格轨道的大小，其包括一个最小值和一个最大值 auto-fill和auto-fit，配合repeat()函数使用...，可以用来替代重复次数，可以根据每列的宽度灵活的改变网格的列数 max-content和min-content，可以根据单元格的内容来确定列的宽度 grid-suto-flow，可以更好的让CSS Grid

7653 0

前沿动态 | 带你提前体验CSS未来的新特性

：https://rachelandrew.co.uk/ 【概要】本篇文章，Rachel Andrew将会带着大家了解下浏览器在CSS方面的未来动向，例如Flexbox行和列布局支持gap间隙属性的标准...Gutters(槽) for flexbox CSS网格布局引入了 grid-column-gap, grid-row-gapl和grid-gapl 等属性，多列布局可以使用 column-gap 属性...可以查看Axis Praxis网站（axis-praxis.org），您可以在线体验各种可变字体并复制用于您创建的可变字体的css。...如果是垂直滚动，start指的是元素的顶部边缘。如果是水平滚动条，它指的是左边缘。center和end遵循相同的原则。你可以为滚动条的不同方向设置不同的值，这两个值之间用空格分隔开。...功能查询的行为与媒体查询的行为大致相同，不同之处在于功能查询不是向浏览器询问有关用于查看站点的设备的信息，而是询问浏览器是否支持特定的CSS功能。这使得以安全逐步增强的方式使用新功能变得更加容易。

1.7K6 0

css学习笔记，持续记录。

animation-fill-mode 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 animation-delay 规定动画何时开始。默认是 0。...Grid网格布局网格属性的大小和宽度都是相对于网格容器元素本身。 grid-template-columns: 20% 20%; //定义网格的列数和网格宽度。...: center; //当网格的长小于整个容器时，整个网格在它的父容器内的上下对齐方式（口内一个田） justify-content: center; //当网格的宽小于整个容器时，整个网格在它的父容器内的左右对齐方式...容器宽高相等当容器的内边距设置100%且高度为0时，元素高度取的是容器的宽度单位。...滚动条的样式 滚动条的样式，只支持Chrome浏览器。

2.7K6 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭