search

miyasuta / blog-bookshop

Developing a Fiori elements app with CAP and Fiori Tools
4 stars 12 forks source link

UI column width issue using Fiori elements #1

Open w48402 opened 1 year ago

w48402 commented 1 year ago

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.

image

image

miyasuta commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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

w48402 commented 1 year ago

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

miyasuta commented 1 year ago

@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.