如何使用 vaadin 使 VerticalLayout 可滚动?

2023-11-22

我有一个组件,它作为我所有页面的通用布局而存在。该组件的布局如下(使用油漆制作,所以请抱歉:p):

layout

向右箭头表示该布局是 Horizo​​ntalLayout,向下箭头表示 VerticalLayout。

我真的很感兴趣使 bodyContent 布局可滚动。在此布局中,我通常会引入大量 UI 组件(更多布局、文本字段、表单、网格...),有时由于缺乏垂直空间和垂直滚动而不会显示组件。那么有没有办法让 bodyContent 可滚动(使用 SCSS/CSS 或任何其他方式)?

提前致谢。

EDIT:我已经解决了这个问题,感谢@JaneVi:

.v-ui > .v-widget {
   overflow: visible;
}

尝试使用Panel您可以在其中放置您的 bodyContent(垂直布局)setContent()当布局的高度超过面板的高度时,可以有滚动条。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 vaadin 使 VerticalLayout 可滚动? 的相关文章

  • `ie9` - contenteditable false 在父级可编辑时不起作用

    我正在尝试制作内容可编辑和不可编辑的容器 用户可以通过 3 种方式使用它 他们可以将内容与non editable 他们可以将内容与editable 他们可以在不选择其中之一的情况下放置内容 可编辑 我正在努力实现以下目标 content
  • 由于 MIME 类型不受支持,拒绝应用样式

    我不断收到一条错误消息 指出 MIME 类型 text html 不可执行或不是受支持的样式表 MIME 类型 并且启用了严格的 MIME 检查 我的链接代码是
  • 在 IE 8 及以下版本中动态添加 @font-face 规则

    我使用 IE stylesheet addRule 方法添加 font face 规则 但是 符号对于该方法的 选择器 参数来说是不允许的字符 因此我收到 无效参数 错误 s addrule font face font family Fo
  • 将样式添加到 mat-autocomplete 的 mat-option

    我有这个 HTML代码在这里 https stackblitz com edit angular mat autocomplete with selected value vx1uqg file src 2Fapp 2Fautocomple
  • 保持未知数量的 div 居中,每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第
  • 指针事件:无,过滤,适用于 ie8 和任何地方,不适用于 ie9

    正如我在这里看到的 https stackoverflow com questions 3680429 click through a div to underlying elements 4839672 4839672 过滤器可用于模拟跨
  • CSS 是否有不等于选择器?

    CSS中有类似 不等于 的东西吗 例如 我有以下代码 input 但对于某些输入 我需要将其作废 我想通过将类 reset 添加到输入标签来做到这一点 例如
  • 在剑道组合框中动态添加项目

    如果你们中有人使用过 kendo ui 请告诉我如何在 kendo 组合框中动态添加新项目 我尝试在谷歌和其他地方搜索 我的结论是剑道中没有这样的功能 以供参考 JSBIN http jsbin com ebutaw 2 edit sour
  • Vuetify 等高 v-tab-items

    请告知如何使 vuetify v tabs 内容显示在等高块中 我在文档中找不到该组件的选项可以帮助高度对齐 By default v tab item height depends on its own content height 布局
  • 使用 Java 清理 CSS

    Java 中有没有一个好的库可以清理 CSS 样式表 我们希望允许管理员用户上传 CSS 样式表来控制他们管理的网站部分的外观 当然 我们不希望出现诸如background url javascript 之类的XSS攻击 因此我们正在寻找一
  • CSS3、WebKit 过渡顺序?如何排队等候转场?

    我有以下内容 webkit transition property top bottom z index webkit transition duration 0 5s 问题是我不希望 z index 在顶部和底部完成之前转换 有没有办法告
  • 输入文本中固定下划线

    我试图修复所有输入文本类型中的下划线 但没有成功 Example My code input width 100 background color fcfcfc border 0 padding 10px div class col lg
  • 比例背景图像

    我想放大和缩小页面中的背景图像 我尝试过多种方法 但似乎没有一种方法能按照我想要的方式工作 我的页面的网址是http quaaoutlodge com drupal 7 14 http quaaoutlodge com drupal 7 1
  • CSS 安全区域属性在 iPhone X 上不起作用

    就我而言 我正在 iPhone X 上运行一个 Web 应用程序 我尝试在顶部添加一个填充 以使用 Webkit 的安全区域 css 属性将我的身体推到安全区域padding top constant safe area inset top
  • 如何在光标下的所有元素上调用 mouseover?

    我有一个网络应用程序 每次单击时都会创建一个点 见下文 当我将鼠标悬停在一堆点上时 我希望光标下的每个点都会触发 mouseover 或 mouseenter 事件 然而 只有一个事件被触发 即堆栈 顶部 的点的事件 当鼠标移动到一堆多个点
  • 呈现为 Flexbox 的有序列表不显示项目符号/小数(项目也呈现为 Flexbox)

    我有一个有序列表 ol 有它的display属性设置为flex 列表项也呈现为弹性框 这样做会导致项目符号 数字 不再显示 有什么办法可以让项目符号显示在ol有课 questions questions likert 在40px的区域pad
  • Excel 类似 HTML 表格,可在 x 轴(完整表格)和 y 轴(标题固定)上滚动

    我想建立一个具有固定宽度列的表格 在大多数情况下 表数据会水平和垂直溢出 如果列的宽度大于视图宽度 则需要水平滚动条来滚动并查看所有表列 同时滚动标题和数据 如果数据的高度大于可用视图 则会出现垂直滚动框 但在滚动时保持标题固定 以便用户关
  • 有没有办法防止输入 type=“number” 获得多个点值?

    我只想得到十进制值 如 1 5 0 56 等 但它允许多个点 有什么办法可以预防吗 您可以使用pattern属性
  • 通过 vh 和 vw 调整 css 字体大小

    所以我想根据容器的大小自动调整文本的大小 但是如果我使用类似的东西 font size 5vw 看起来不错 但是当我缩小页面时 高度开始变得太小 无论如何 我是否可以根据 vh 和 vw 调整文本大小 例如 如果我只是减小页面的宽度 那么高
  • CSS 旋转轮在 5 秒后停止?

    我正在使用我在小提琴上找到的 CSS 代码来旋转我的轮子 http jsfiddle net gaby 9Ryvs 7 http jsfiddle net gaby 9Ryvs 7 div margin 20px width 100px h

随机推荐

  • 并行流非并发无序收集器

    假设我有这个自定义收集器 public class CustomToListCollector
  • WPF:如何从 Fonts.SystemFontFamilies 中过滤掉非罗马字体?

    我知道如何使用几行 XAML 创建一个 WPF 字体选择器 绑定到Fonts SystemFontFamilies 感谢 Norris Cheng 的精彩博客文章 但我不知道如何过滤掉所有国际和其他非罗马字母字体系列 我的用户不太可能需要
  • Roxygen 真的可以像 Doxygen 对 C++ 那样记录 R 脚本(而不是包)吗?

    Roxygen 的灵感来自 C C 程序员使用的 Doxygen 文档系统 我使用过 Doxygen 我发现只要有 doxygen 注释 记录任何程序都非常容易 它还生成函数和类的调用图 我认为 roxygen 会以同样的方式工作 但是当我
  • Grails sql 查询

    想象一下我有这样的东西 def example def temp ConferenceUser findAllByUser User get session user temp temp 解释我的问题 虽然动态查找器非常易于使用且学习速度很
  • 如何在Python中获取文本字符串的视觉长度

    如同这个问题 我不是问如何查找字符串中的字符数 我想确定渲染时字符串的视觉长度或将其与另一个字符串进行比较 例如 iiii 和 WWWW 都有四个字符 然而 iiii 在视觉上更短 我知道这是由字体决定的 并且我不使用等宽字体 因此 为了解
  • 如何修改运行时加载的 DLL 的导入地址表

    我想挂钩在运行时从加载的 DLL 调用的函数 我使用了 Windows Via C C 一书中的 CAPIHook 类 DLL 注入由 Install System Wide hook 完成 The hooking 由修改 IAT 完成 但
  • 如何填充 UIView 的背景图片

    我有一个UIView我这样设置背景图片 self view backgroundColor UIColor colorWithPatternImage UIImage imageNamed sfond appz png 我的问题是背面图像不
  • 从技术上讲,是否可以通过编程方式截取网站的屏幕截图?

    您认为以编程方式截取网站的屏幕截图在技术上可行吗 我想制作一个计划的 Python 任务来抓取网站列表并截取它们的主页屏幕截图 您认为技术上可行吗 或者您是否知道提供此类服务的第三方网站 Input url gt Output screen
  • “借用的数据不能存储在其封闭之外”是什么意思?

    编译以下代码时 fn main let mut fields Vec new let pusher mut a str fields push a 编译器给我以下错误 error borrowed data cannot be stored
  • python-docx:将表解析为 Pandas Dataframe

    我正在使用python docx用于提取 MS Word 文档的库 我可以使用同一个库从Word文档中获取所有表格 但是 我想将表解析为 panda 数据框架 是否有任何内置功能可以用来将表解析为数据框架 或者我必须手动执行此操作 另外 是
  • 如何处理同构呈现形式的早期输入

    我有一个 React 应用程序 其中包含一个表单 该表单在服务器端呈现 并预先填充了用户正在进行的工作 问题是 如果用户在应用程序加载之前编辑表单中的值 则应用程序不会意识到更改 当用户保存时 服务器呈现的未更改的数据将被重新保存 并且用户
  • EventSource:总是出现错误

    首先EventSourceAPI 我写了最学术的例子 问题是我总是遇到错误 而且找不到任何有用的信息 当我加载时home html JS脚本停止于source onerror 我将其打印到控制台 但分析对象时我找不到任何错误类型或消息 所以
  • Laravel:vue 组件未渲染

    尽管遵循了以下教程 但我的 vue 组件并未在页面上呈现 我有以下布局 master blade php
  • 如何导航到父活动

    好吧 当我在做某事并且我需要在我的应用程序中配置操作栏时 我从http developer android com我找到了我要找的东西 public boolean onOptionsItemSelected MenuItem item s
  • geom_bar 的 gganimate 问题?

    自从 David Robinson 发布了他的 gganimate 包以来 我一直怀着羡慕和钦佩的心情看着 Twitter 上出现的各种 ggplot 动画 并认为我自己也可以玩一玩 我在使用 geom bar 时遇到 gganimate
  • firefox @font-face 因 fontawesome 失败

    我在运行的 OSS 应用程序上使用 FontAwesome 字体 但我似乎无法通过 Firefox 的字体清理程序 这些文件都在同一个域中提供 路径是正确的 我使用的是 FontAwesome 的官方 css 当通过其网站和本地文档提供时
  • 判断对象的类型? [复制]

    这个问题在这里已经有答案了 有没有一种简单的方法来确定变量是列表 字典还是其他变量 有两个内置函数可以帮助您识别对象的类型 您可以使用type 如果您需要对象的确切类型 并且isinstance to check对象的类型针对某物 通常 您
  • C# 中的 IRC 库 [关闭]

    Closed 这个问题不符合堆栈溢出指南 目前不接受答案 我想在我的程序中嵌入一个小聊天窗口 用作基本的 IRC 客户端 这需要有限的功能 例如连接 断开连接 列出用户和发送私人消息 在撰写本文时 我已经尝试了几个臃肿的库 这些库使得创建一
  • 字典方法 Remove 和 Clear (.NET Core) 在枚举期间修改集合。没有抛出异常

    我正在尝试实现一个缓存机制安全地枚举集合 并且我正在检查内置集合的所有修改是否都会触发InvalidOperationException由各自的枚举器抛出 我注意到在 NET Core 平台中Dictionary Remove and Di
  • 如何使用 vaadin 使 VerticalLayout 可滚动?

    我有一个组件 它作为我所有页面的通用布局而存在 该组件的布局如下 使用油漆制作 所以请抱歉 p 向右箭头表示该布局是 Horizo ntalLayout 向下箭头表示 VerticalLayout 我真的很感兴趣使 bodyContent