Skip to Content
0

Zoom in and distortation

May 08 at 07:02 AM

23

avatar image

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

1 Answer

Best Answer
Ivan Mirisola
May 10 at 02:14 PM
0

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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.

1