将自定义css应用于sapui5磁贴

时间:2015-10-27 09:06:14

标签: javascript css sapui5

我为我的SAPUI5应用程序创建了动态切片,此页面上的切片需要调整大小,所以我添加了一个自定义的CSS样式类。

.administrationTile {
    width: 18rem;
    height: 14rem;
}

我这样申请:

oTile.addStyleClass('administrationTile');

我的问题是,这只会调整磁贴本身的大小,但不会更改磁贴中内容的大小。我之前在onAfterRendering部分做过这样的事情:

setTimeout(function(){

for (var i = 1; i < 8; i++)
{
     $("#MyTileContainer-"+i+".sapMTile").css({
       width: "18rem",
       height: "14rem"    
     });
}

$("div.sapMTileContent").css({
    width: "18rem",
    height: "14rem"
});

$("div.sapMStdTileNumDiv").css("width", "12rem");

}, 200);

哪种方法有效,但这是一种非常难看的方法,因为它不会一直工作,你会看到瓷砖的大小发生变化(没有超时甚至根本不起作用)

我的问题是如何在没有这个丑陋的解决方法的情况下应用属于这个图块的其他类(sapMTileContent和sapMStdTileNumDiv)。

2 个答案:

答案 0 :(得分:0)

  

这只会调整图块本身的大小,但不会更改图块中内容的大小。

据我了解,您正在修改切片宽度,而不是内容。

.administrationTile {
    width: 18rem;
    height: 14rem;
    font-size: 4rem; /*  <---  */
}

在此Fiddle

中查看

答案 1 :(得分:0)

您是否认为这可能是CSS继承问题。如果您检查对象并关注您试图影响的对象,然后使用Chrome的“Inspect element”右键单击选项查看正在应用于此对象的CSS样式,您可能需要检查样式是否不正确后来在CSS链中过度使用。 (希望这有道理吗?)