UI column width issue using Fiori elements

[w48402]

Hello Mio,

I am going through your blog and creating CAP application using FIORI elements. I have noticed one thing which i would like to hightlight that columns are not alighing as per their width. So there is mismatch of column width, I have tried to adjust using UI html annotation but its hardcoding and if select more columns then table columns width will be messed up.
I am attaching herewith my sample screenshot. I have noticed that yours column width is perfect. Could you please advise anything you have done anyting for this.

[miyasuta]

Hello @w48402,

With newer UI5 versions there is a gap between the last column and the end of the screen, similar to the screenshot you provided. This repo is relatively old, so the table occupies the entire width of the screen.

[w48402]

Thank you Miyasuta for your quick response.

How can i fix this issue then? or should I go with fiori free style rather than hardcoding the width in fiori elements. Any suggestions or guidance how to go ahead.

Thanks,
Deepti

[miyasuta]

@w48402
From the perspective of the UI5 team, the current state (like yours) is more optimized than the old state. Therefore, moving to a free style isn't a good idea because it would mean losing all the out-of-the-box functionalities that Fiori elements provide.

[w48402]

Thank you. I totally agree with you but table with less columns like mine won't be giving good user experience due to this gap between the last column and end of the screen. How to fix this. Sorry for asking so many questions, I am relatively new in Fiori area, hence troubleshooting.

[miyasuta]

Is your app running on BTP Launchpad? Which OData version are you using?

[w48402]

Yes its running on BTP, I am doing side by side implementation using CAP and fiori odatamodel V2

[miyasuta]

@w48402
According to the KBA below, optimized column width was introduced from UI5 version 1.87.
https://userapps.support.sap.com/sap/support/knowledge/en/3059550

You can specify UI5 version in manifest.json with parameter "sap.platform.cf": { "ui5VersionNumber": "1.86.1" }.
https://userapps.support.sap.com/sap/support/knowledge/en/3090865

So, if you specify a UI5 version lower than 1.87, the table would take up the whole screen width.
Please note that I have not personally tested this myself.