Make sap.m.CustomTile resizable for resolution e.g. from 500px to 320px


I customized the sap.m.CustomTile with some sap.m.FormattedText. I need this CustomTile to be resizable according to display resolution e.g. from 500 px to 320 px. I used for this:

@media only screen and (max-width: 500px) { 

    .tileSmall.sapMCustomTile {
        width: 80.9vw !important;
        height: 80.9vw !important;
    }

}

@media only screen and (max-width: 320px) { 

    .tileSmall.sapMCustomTile {
        width: 200px !important;
        height: 200px !important;
    }

}

I can not use % because it behaves strange in my app. So I am trying to use vw instead. I did demo. I would like to keep it all the time as it for resolution 530px in the:

enter image description here

But when the resolution is change to e.g. 417px I got:

enter image description here

The resolution 357px I got:

enter image description here

Is there any way how to anchor footer and subfooter (last two rows)?

Or how to change height of the gap (created by br tag) according to tile height?

Thanks for any advice.


Answers:


Because you are using VBox inside the custom tile, it is fairly easy to achive what you want. You can check out the Size Adjustments Explored demo for more examples.

The basic idea is that you can play around with the grow / shrink factors of each item inside the VBox. By default, all the items of a VBox are treated equally and are stretched to fill in the available space. Because you want your header and footer to be fixed, you should set the shrinkFactor (default = 1) and growFactor(default = 0) to 0 for these items.

The center of the tile should be just "whitespace" to fill in the rest of the available space, so you can give it growFactor and shrinkFactor equal to 1. You also don't need to put brs in there, because the item will grow / shrink dynamically to fill in the remaining space.

You can add these factors for each UI5 Element using the layoutData aggregation and passing a FlexItemData element.

Another small change is that you should specify width: "100%" and height: "100% for the VBox to make sure its size adjusts based on the tile's size.

Header / footer

   new sap.m.FormattedText({
       htmlText: "whatever you have now",
       layoutData: new sap.m.FlexItemData({
         shrinkFactor: 0
       })
   });

Center

   new sap.m.FormattedText({
       htmlText: "no need to put anything here",
       layoutData: new sap.m.FlexItemData({
         shrinkFactor: 1,
         growFactor: 1
       })
   }); 

You can find a working version of this solution here: http://jsbin.com/tirizanaje/1/edit?html,css,output