我正在为我的应用程序使用OpenUI5 ToolPage。在所有演示中,此ToolPage占用可用宽度的100%,但我想使用媒体查询设置左右边距。

<mvc:View
    height="100%"
    controllerName="internal_app.controller.App"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:tnt="sap.tnt">

<tnt:ToolPage id="app" class="internalAppToolPage">
    <tnt:header>
        <tnt:ToolHeader>
######


我的看法是这样的。我将类internalAppToolPage添加到ToolPage并设置CSS

@media (min-width: 1280px) {
    .internalAppToolPage {
        width: 1280px !important;
        margin-left: 50%;
        background-color: rgba(255,255,255,0.3);
    }
}


但这会导致整个页面向右移动。我究竟做错了什么。抱歉,这太丢了,但是我看不到我的错误。

最佳答案

如果仅担心双方的余量,则无需使用媒体查询。由于UI5 sap.m库提供了响应式布局。

您只需要使用标准的UI5类即可帮助您满足要求。

您可以通过Standard Margins来提供不同的边距类。它还提供响应式类。

您还可以根据需要参考Standard Padding

关于css - OpenUI5:在ToolPage的两侧添加边距,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/53486779/

10-12 05:30