Zoom in and distortation

[former_member415881]

Hi All,

I am using sapui5 table which has multiLevel headers. Things work fine until i zoom in to 50% , 33% and to 25%

Each of the coloumn has 120px width and below is the css that adust the positionof the outline. Total there are 4 quarters.

.tableHeading{
width: 480px !important;
/*width: 3.1% !important;*/
}

appriciate any help on this.

[Ivan-Mirisola · Accepted solution]

Hi Fehmina,

When you define a width in pixels it makes it impossible for browsers to use the same properly. That's why this is discouraged by the Fiori Guidelines. Think about the fact that a Fiori Principle is that it must be able to draw the web application in a 15" screen monitor or a mobile device which has a completely different form factor. Keep in mind that your application will not always find free space for a 480px width screen component. To let the framework and the browser place elements on the screen it is best to use the width defined as a percentage of the parent element instead of fixed width.

For large table content, I would suggest you using either a split-screen application or a master-detail archetype. The idea is to "break" information apart so users maintain their "focus" on their work. Think of this as how you are actually reading a table. Humans don't read all information at once - they navigate a huge table (usually using their fingers to maintain focus). So you might want to re-think the purpose of your table and reasons why you should or shouldn't display all information at-once.

Regards,
Ivan

[former_member415881 · Accepted solution]

Hi IVan,

Yes this is absolutely what i did. I have used master-detail screen. And instead of giving width in px which is fixed. I used rem widths and used media queries to resolve the issue at 50%, 33% and 25% zoom. Beyond 75% it worked fine.