Skip to Content

Zoom in and distortation

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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    May 10 at 02:14 PM

    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

    Add comment
    10|10000 characters needed 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.