Question

我想将sap.m.FlexBox控件放在像THIS ONE这样的图像框架中。该图像位于另一个FlexBox控件中：

var oContainer3 = new sap.m.FlexBox({
    id: "container3",
    direction: "Column",
    width: "70%",
    items: [
        new sap.m.Image({
            id: "tabletImg",
            src: "content/img/tabletVideoFrame.png"
        })
    ]
});

我需要放置以下控件：

var oSelectedFieldsContainer = new sap.m.FlexBox({
    id: "selectedFieldsContainer",
    direction: "Column",
    items: [
        new sap.m.Text({
            text: "This is a container for Selected Fields",
            textAlign: "Right",
            width: "100%",
            height: 100%
        })
    ]
});

在图像框架的空白区域内。

我尝试在控制器的onAfterRendering()功能中执行以下操作：

var imgPosition = $("#tabletImg").position();
$("#tabletImg").before("<div id='selectedFieldsDiv'></div>");
      oSelectedFieldsContainer.placeAt("selectedFieldsDiv");
      var x = imgPosition.left + 70;
      var y = imgPosition.top + 170;
 $("#selectedFieldsDiv").css({
      position: absolute,
      z-index: 5000,
      top:      y, 
      left:     x
 });

问题在于图像的大小和位置随着屏幕分辨率和新div的位置而变化 - 所以控件在整个屏幕上跳跃.. < / p>

提前谢谢。

Answer 1

我将以下css属性添加到所需的容器中：

#container {
    border-image: url('../content/img/tabletVideoFrame.png') 175 110 175 110;
    border-width: 45px;
    width:550px;
    height: 600px;
};

将图像添加为边框解决了我的问题。

如果有人有更好的解决方案，欢迎您分享。

将FlexBox插入图像框架

1 个答案: