Question
BOA
IN
Last activity: 31 May 2022 3:52 EDT
Table layout issue when i zoom it to 400 percent
Hi Team,
As a part of fixing compliance issues we want to make sure that our application looks as expected even when zoomed to 400 percent in browser.
For table layouts the header columns goes invisible when browser is 400 percent zoomed. I can see the content in table but not the column headings. I have gone through few other posts with similar issue but didnt find a solution. Can anyone help on this.
Updated: 21 Apr 2022 10:11 EDT
Pegasystems Inc.
GB
@Pavani_Regulagedda according to this support article Pega only supports 100% zoom levels. Can you tell us why you need to test the 400 percent zoom for this table layout?
Could you take a look at the following post which has some troubleshooting suggestions?
Do you use use custom format for table layout and define headers format in the skin?
If not, please provide screen shots of your configuration approach. Please provide screens showing the before and after, and details of what browser you tested with.
BOA
IN
@MarijeSchillern As a part fo ADA compliance we want our application to be accessible for partially blind people. They will zoom to 400 % and use my application. I tested in chrome, edge browsers. PFA. No not using any custom formats.
Updated: 31 May 2022 5:39 EDT
Pegasystems Inc.
GB
@Pavani_Regulagedda Does the same issue occur if you us Microsoft Edge browser (as noted on the your onscreen warning)?
I believe this can occur in instances where there are custom headers to hold menu items, operator information, logos, etc as in your example. As the amount of content in this header is large enough that all of it could not fit, the elements will disappear on screen. The content does not fully disappear, we find it is being pushed downwards on the page hidden from sight. The horizontal top header menu and its contents appear to be necessary with respect to your application logo etc requirements?
I have seen other examples where the solution is by means of a middle path that would involve being able to dynamically adjust the header as zoom level/screen resolution is modified.
This involved creating new dynamic layouts in the skin rule, adding custom responsive breakpoints in these layouts, and incorporating these new layouts into the section rule containing the header elements. This approach will require some elements to be collapsed into a drop-down button as the zoom increased/resolution shrinks.
There are workarounds for this where we can wrap the menu items in different Dynamic Layouts and add breakpoint skin rules to show each based on screen resolution.
@Pavani_Regulagedda Does the same issue occur if you us Microsoft Edge browser (as noted on the your onscreen warning)?
I believe this can occur in instances where there are custom headers to hold menu items, operator information, logos, etc as in your example. As the amount of content in this header is large enough that all of it could not fit, the elements will disappear on screen. The content does not fully disappear, we find it is being pushed downwards on the page hidden from sight. The horizontal top header menu and its contents appear to be necessary with respect to your application logo etc requirements?
I have seen other examples where the solution is by means of a middle path that would involve being able to dynamically adjust the header as zoom level/screen resolution is modified.
This involved creating new dynamic layouts in the skin rule, adding custom responsive breakpoints in these layouts, and incorporating these new layouts into the section rule containing the header elements. This approach will require some elements to be collapsed into a drop-down button as the zoom increased/resolution shrinks.
There are workarounds for this where we can wrap the menu items in different Dynamic Layouts and add breakpoint skin rules to show each based on screen resolution.
Documentation around this subject can be found here.
I will leave other users to comment if they have successfully implemented these workarounds, and if you need further help, please log a support incident on the MSP so that our Support engineer can take a look at your scenario in details.
Pegasystems Inc.
GB
you appear to have asked similar questions recently:
Table layout issue when i zoom it to 400 percent
Check box property also displaying when i zoom in table layout
How to check my browser zoom size?
Below is all documentation about Accessibility :
https://docs-previous.pega.com/user-experience/85/building-accessible-ui
https://docs-previous.pega.com/user-experience/86/configuring-accessible-ui
https://docs-previous.pega.com/user-experience/85/accessibility-standards-pega-platform
https://docs-previous.pega.com/user-experience/86/best-practices-accessibility
https://docs-previous.pega.com/user-experience/86/out-box-accessibility-features
https://docs-previous.pega.com/user-experience-cosmos-react/86/best-practices-accessibility
It does not make sense to have so many identical questions open.
you appear to have asked similar questions recently:
Table layout issue when i zoom it to 400 percent
Check box property also displaying when i zoom in table layout
How to check my browser zoom size?
Below is all documentation about Accessibility :
https://docs-previous.pega.com/user-experience/85/building-accessible-ui
https://docs-previous.pega.com/user-experience/86/configuring-accessible-ui
https://docs-previous.pega.com/user-experience/85/accessibility-standards-pega-platform
https://docs-previous.pega.com/user-experience/86/best-practices-accessibility
https://docs-previous.pega.com/user-experience/86/out-box-accessibility-features
https://docs-previous.pega.com/user-experience-cosmos-react/86/best-practices-accessibility
It does not make sense to have so many identical questions open.
If you believe our OOTB functionality is lacking or not behaving as documented, please can I suggest that you log a support incident in order that our support team help you with your specific product issue?
Please provide the incident INC ID here so that we can help track the response.
BOA
IN
@MarijeSchillern as mentioned in other post .. all these questions are interrelated but not one and the same. There are multiple UI issues i am facing .
Updated: 28 Jul 2022 8:09 EDT
Areteans Tech
AU
This might be due to the responsiveness set in the table format . Since the screen size is small in 400% , Only the Column which are set as primary are shown.