CODEWITHSUNDEEP
javascriptcsssapui5
broodplank
broodplank

Reputation: 41

Apply custom css to sapui5 tile

I have created dynamic tiles for my SAPUI5 application, the tiles on this page need to be resized so I added a custom css style class.

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

Which I apply like this:

oTile.addStyleClass('administrationTile');

My problem is that this only adjusts the size of the tile itself, but doesn't change the size of the content in the tile. I previously did it like this in the onAfterRendering part:

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);

Which does work, but it's a very ugly method because it doesn't work at all times and you see the tile changing in size (without timeout it doesn't even work at all)

My question is how can I apply the other classes (sapMTileContent and sapMStdTileNumDiv) that belong to this tile without this ugly workaround.

Upvotes: 0

Views: 1981

Answers (2)

Bernard
Bernard

Reputation: 1238

Have you considered this may be a CSS inheritance issue. If you inspect the object and focus on the object you are trying to influence and then look at the CSS styles that are being applied onto this object using Chrome's "Inspect element" right-click option you may want to check if the style is not being over-ridden later in the CSS chain. (Hope this makes sense?)

Upvotes: 0

plmk
plmk

Reputation: 2654

this only adjusts the size of the tile itself, but doesn't change the size of the content in the tile.

As far as I understand, you are modifying the tile width, but not the contents.

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

Look at it in this Fiddle

Upvotes: 0

Related Questions