Vaadin模态窗口:如何在父视图上获取滚动条

新奇拉

我正在使用Vaadin 7.6.1,但Vaadin的Window组件出现问题。我的窗口是模态的,具有固定大小。但是,如果调整浏览器窗口的大小,则该窗口太大而无法完整显示。

下图应说明上下文:

ImageDialogScrollProblem

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

我使用了Vaadin官方仪表板演示的代码结构,并对其进行了修改:https : //github.com/vaadin/dashboard-demo

编辑:也许很有趣重现该问题。在Vaadin采样器中,您可以打开窗口,将其设置为模式窗口,调整窗口大小(更大),最后调整浏览器窗口的大小:http : //demo.vaadin.com/sampler/#ui/structure/window

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

莫尔菲奇

查看生成的源,默认情况下看起来像body定义overflow: hidden;,因此没有滚动条出现。一个可行的解决方法(从这里得到一些启发)是将其更改为overflow: auto;您的主题。

如果您知道可以安全地在

body

元素(例如,主题仅在页面上唯一的应用中使用),您可以使用

.v-generated-body

选择器。仅当应用程序是直接从servlet提供的,而不是嵌入在另一个页面中时,它才可用。

不确定是否不再适用,但是直到我将定义移到@mixin此处所解释的范围之外,它对我才起作用

请注意,Vaadin 7.0错误地没有在引导过程中添加主题名称。因此,您必须使用不带主题名称的规则,例如

.v-generated-body .v-app .v-app-loading 

并将其移出@mixin。您还需要确保v-app div的高度为

.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
}

您应该得到类似于以下内容:

样本

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在 Vaadin 7 表中添加滚动条

来自分类Dev

如何在jquery / javascript中获取动态列表视图的滚动条?

来自分类Dev

如何在模式窗口弹出窗口上隐藏滚动条

来自分类Dev

如何在xamarin ios的滚动视图中添加滚动条?

来自分类Dev

如何在滚动视图Xamarin表单中隐藏滚动条?

来自分类Dev

如何在HTML CSS中将滚动条添加到父div?

来自分类Dev

获取浏览器窗口宽度,包括滚动条

来自分类Dev

JavaScript:获取窗口宽度减去滚动条宽度

来自分类Dev

JavaScript:获取窗口宽度减去滚动条宽度

来自分类Dev

Extjs窗口滚动条

来自分类Dev

如何在我的div中没有窗口中显示滚动条?

来自分类Dev

如何在以窗口为中心的div中启用高度不固定的滚动条?

来自分类Dev

如何在UWP上隐藏列表视图垂直滚动条?

来自分类Dev

如何在表格内添加垂直滚动条(剃刀视图)

来自分类Dev

如何使用滚动条使列表适合父div

来自分类Dev

模态不重叠的滚动条

来自分类Dev

如何从角度弹出窗口中删除垂直滚动条

来自分类Dev

PopEasy模态窗口中的JScrollPane(自定义滚动条)

来自分类Dev

Tkinter; 如何在主根窗口中按下按钮时打开的弹出/顶级窗口中使用滚动条

来自分类Dev

如何在QGraphicsview中滚动超出滚动条范围?

来自分类Dev

CSS:如何获取定位的div以使用窗口水平调整大小,而不是获取滚动条

来自分类Dev

CSS:如何获取定位的div以使用窗口水平调整大小,而不是获取滚动条

来自分类Dev

如何在uwp中的scrollviewer中获取滚动条高度?

来自分类Dev

如何在Silverlight中获取默认滚动条的子元素(例如,repeatbutton,thumb等)?

来自分类Dev

如何在没有滚动条的情况下获取radChildwindow?

来自分类Dev

如何在滚动条对话框中添加滚动条?

来自分类Dev

如何在插件(滚动条插件)中计算滚动条宽度?

来自分类Dev

在模态对话框中显示滚动时如何隐藏正文滚动条?

来自分类Dev

滚动条对父div事件的反应

Related 相关文章

  1. 1

    如何在 Vaadin 7 表中添加滚动条

  2. 2

    如何在jquery / javascript中获取动态列表视图的滚动条?

  3. 3

    如何在模式窗口弹出窗口上隐藏滚动条

  4. 4

    如何在xamarin ios的滚动视图中添加滚动条?

  5. 5

    如何在滚动视图Xamarin表单中隐藏滚动条?

  6. 6

    如何在HTML CSS中将滚动条添加到父div?

  7. 7

    获取浏览器窗口宽度,包括滚动条

  8. 8

    JavaScript:获取窗口宽度减去滚动条宽度

  9. 9

    JavaScript:获取窗口宽度减去滚动条宽度

  10. 10

    Extjs窗口滚动条

  11. 11

    如何在我的div中没有窗口中显示滚动条?

  12. 12

    如何在以窗口为中心的div中启用高度不固定的滚动条?

  13. 13

    如何在UWP上隐藏列表视图垂直滚动条?

  14. 14

    如何在表格内添加垂直滚动条(剃刀视图)

  15. 15

    如何使用滚动条使列表适合父div

  16. 16

    模态不重叠的滚动条

  17. 17

    如何从角度弹出窗口中删除垂直滚动条

  18. 18

    PopEasy模态窗口中的JScrollPane(自定义滚动条)

  19. 19

    Tkinter; 如何在主根窗口中按下按钮时打开的弹出/顶级窗口中使用滚动条

  20. 20

    如何在QGraphicsview中滚动超出滚动条范围?

  21. 21

    CSS:如何获取定位的div以使用窗口水平调整大小,而不是获取滚动条

  22. 22

    CSS:如何获取定位的div以使用窗口水平调整大小,而不是获取滚动条

  23. 23

    如何在uwp中的scrollviewer中获取滚动条高度?

  24. 24

    如何在Silverlight中获取默认滚动条的子元素(例如,repeatbutton,thumb等)?

  25. 25

    如何在没有滚动条的情况下获取radChildwindow?

  26. 26

    如何在滚动条对话框中添加滚动条?

  27. 27

    如何在插件(滚动条插件)中计算滚动条宽度?

  28. 28

    在模态对话框中显示滚动时如何隐藏正文滚动条?

  29. 29

    滚动条对父div事件的反应

热门标签

归档