Lumira Designer:自适应布局不能滚动?

2020-09-18 18:28发布

         点击此处--->   EasySAP.com群内免费提供SAP练习系统(在群公告中)

加入QQ群:457200227(SAP S4 HANA技术交流) 群内免费提供SAP练习系统(在群公告中)


你好

我使用Lumira 2.0 Designer构建了一个演示应用程序,在调整屏幕大小时遇到​​了问题。 自适应布局组件正确地布置了元素,但是当将窗口调整为"小"尺寸(在桌面上)时,我的图块垂直排列,并且用户不再看到底部的图块。 默认情况下,也没有向下滚动的选项。 因此,我正在寻找解决方案并执行以下操作:

创建了一个面板,并在其中插入了自适应布局组件。

创建CSS类:

div.zenborder div.scroll-y

{/*不允许X滚动*/overflow-x:隐藏!重要;/*允许Y滚动*/溢出-y:滚动!important;

我还将CSS类分配给了面板。

请查看随附的屏幕截图以获取结果...

有什么办法解决这个问题吗?

提前谢谢!

内容:

CSS:

分配了CSS类的面板:

大结果:

结果媒介:

小结果:(如您所见,我无法向下滚动以完全看到第四个图块)

(16.4 kB)

         点击此处--->   EasySAP.com群内免费提供SAP练习系统(在群公告中)

加入QQ群:457200227(SAP S4 HANA技术交流) 群内免费提供SAP练习系统(在群公告中)


你好

我使用Lumira 2.0 Designer构建了一个演示应用程序,在调整屏幕大小时遇到​​了问题。 自适应布局组件正确地布置了元素,但是当将窗口调整为"小"尺寸(在桌面上)时,我的图块垂直排列,并且用户不再看到底部的图块。 默认情况下,也没有向下滚动的选项。 因此,我正在寻找解决方案并执行以下操作:

创建了一个面板,并在其中插入了自适应布局组件。

创建CSS类:

div.zenborder div.scroll-y

{/*不允许X滚动*/overflow-x:隐藏!重要;/*允许Y滚动*/溢出-y:滚动!important;

我还将CSS类分配给了面板。

请查看随附的屏幕截图以获取结果...

有什么办法解决这个问题吗?

提前谢谢!

内容:

CSS:

分配了CSS类的面板:

大结果:

结果媒介:

小结果:(如您所见,我无法向下滚动以完全看到第四个图块)

(16.4 kB)
付费偷看设置
发送
12条回答
追夢秋陽
1楼 · 2020-09-18 19:04.采纳回答

我已解决此问题-将CSS更改为以下内容:

div.zenborder div.scroll-xy {

/*允许X滚动*/
overflow-x:滚动!重要;

/*允许Y滚动*/

溢出-y:滚动!重要; }

现在,当我打开报表(在本地或Lumira Designer中的BIP上)并调整窗口大小时,将显示滚动条。

我意识到,当我在BI Launchpad中打开报表时,即使在调整窗口大小时也不会出现滚动条。

是否知道如何在BI Launchpad上也可以使用此功能?

风早神人
2楼-- · 2020-09-18 18:42

我意识到这实际上取决于您使用的浏览器以及是否删除所有本地缓存​​文件。 chrome或firefox不会出现此问题。

暮风yp
3楼-- · 2020-09-18 18:40

嗨,马里奥,

我之前遇到过相同的要求,并成功为class scroll-y 应用了上面显示的完全相同的CSS。 但是,就您的情况而言,我注意到,尽管您在CSS中定义了 scroll-y ,但实际上您已将 scroll-xy 类分配为Panel CSS Class属性值 scroll-y 。 也许这是一个错字?

此致

Mustafa。

小熊yu生菜
4楼-- · 2020-09-18 19:06

问题似乎出在您使用的类上。 在BI Launchpad上,我注意到有时使用了不同的类(.sapUiLayoutAbsOvrflwYHidden),因此滚动条仍处于隐藏状态。

我找到的最可靠的解决方案是使用CSS样式字段,而不是CSS类,而只需输入

/*不允许X滚动*/
overflow-x:隐藏!important;
/*允许Y滚动*/
overflow-y:scroll!important;

这似乎在本地模式和BI平台上都有效。

当学会了学习
5楼-- · 2020-09-18 18:49

在桌面上,如果调整浏览器的大小,它将显示

奄奄一息的小鱼
6楼-- · 2020-09-18 18:51

我在尝试实施网站 madhustamps 时遇到了同样的问题,这里的答案对我有所帮助。

谢谢您的发帖和分享。

jovirus
7楼-- · 2020-09-18 19:07

嗨。

如果我理解正确,那么您想实现跟随图片。我已经成功了,您可以添加此CSS

 .sapUiLayoutAbs.sapUiLayoutAbsOvrflwXHidden.sapUiLayoutAbsOvrflwYHidden.zenborder.zen-design-none-border> div>#ADAPTIVE_LAYOUT_1 {
     溢出-y:滚动!重要;
 } 

一周热门 更多>