Vaadin Modal Window：如何在父视图上获取滚动条

Question

我正在使用 Vaadin 7.6.1，我遇到了 Vaadin 的 Window 组件的问题。我的 window 是模态的并且有一个固定大小。但是，如果浏览器 window 调整大小，window 太大而无法完整显示。

下图应该说明上下文：

在这种情况下，我希望浏览器显示滚动条，这样用户仍然可以使用整个对话框。

我使用了Vaadin官方的dashboard demo的代码结构，并进行了修改：https://github.com/vaadin/dashboard-demo.

编辑：重现问题也许很有趣。在 Vaadin Sampler 中，您可以打开 Window，将其设置为模态，调整大小（变大），最后调整浏览器大小 window：http://demo.vaadin.com/sampler/#ui/structure/window

Edit2：这个 JQuery 的对话框示例演示了我的要求：https://jqueryui.com/dialog/#modal-form 打开对话框后，我可以调整浏览器 window 的大小，这样就无法显示整个对话框。但是有滚动条所以用户仍然可以使用它。

Answer 1

查看生成的源代码，看起来 body 默认定义了 overflow: hidden;，所以没有滚动条显示。一个可能的解决方法（从 here 获得一些灵感）是在您的主题中将其更改为 overflow: auto;。

If you know it's safe to specify something on the
body
element (e.g.the theme will be used only in an app that is the only thing on the page), you can use the
.v-generated-body
selector. It will be available only if the application is served directly from the servlet,and not embedded in another page.

不确定 this 是否适用，但它对我不起作用，直到我将定义移到 @mixin 之外，就像那里解释的那样：

Note that Vaadin 7.0 incorrectly does not add the theme name during bootstrap. You must therefore use a rule without the theme name, e.g.
.v-generated-body .v-app .v-app-loading 
and move it out of the @mixin. You also need to ensure the v-app div has a height using
.v-app {height:100%;}

mytheme.scss

@import "../valo/valo";

// must be outside theme mixin as per https://vaadin.com/wiki/-/wiki/Main/Adding+a+splash+screen
.v-generated-body {
  // change the overflow from hidden to auto
  overflow: auto;
  // copy the rest as it was
  margin: 0;
  padding: 0;
  border: 0;
}

@mixin mytheme {
  @include valo;

  // other customizations
}

您应该得到类似于：

Vaadin Modal Window：如何在父视图上获取滚动条

Vaadin Modal Window: How To Get Scrollbars On The Parent View

java

vaadin