on 2018 May 08 8:02 AM
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.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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.
User | Count |
---|---|
69 | |
9 | |
8 | |
7 | |
7 | |
6 | |
5 | |
4 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.