Question

6
Replies
634
Views
 Deepika Kumar (DeepikaKumar)
HCL

HCL
NL
DeepikaKumar Member since 2013 4 posts
HCL
Posted: January 4, 2019
Last activity: January 16, 2019
Posted: 4 Jan 2019 6:22 EST
Last activity: 16 Jan 2019 4:23 EST
Closed

Image size does not adjust automatically when the screen resolution is less than 100%

Problem statement - An image has been included in a dynamic layout in a section. The image size is set to auto. The image loads as expected in the full screen when the screen resolution is 100%. But when the resolution is reduced, the image size is reduced and a grey space appears in the remaining part of the screen. Please advice on how to auto adjust the size of the image with respect to the screen resolution. Screenshots attached for reference.

Thanks,
Deepika Kumar

User Experience
Moderation Team has archived post, This thread is closed to future replies. Content and links will no longer be updated. If you have the same/similar Question, please write a new Question.
Posted: 2 years ago
Posted: 4 Jan 2019 14:15 EST
Bhuvana Mahalingam (mahab_GCS)
PEGA
Principal GCS Solutions Engineer
Pegasystems Inc.
US

Hi Deepika


 I am a bit confused. To me, both your Before Zoom and After Zoom image appears the same. 


Moreover, I think you meant to say that the image loads as expected in the full screen when the zoom is set to 100%. Instead you wrote screen resolution. Could you clarify? Because it is possible to have different screen resolutions and still play with zoom. 


Try playing with the custom image example in the UI gallery. Whatever behavior you see there would be the expected behavior.


Hope that helps.
Posted: 2 years ago
Posted: 7 Jan 2019 2:35 EST
Deepika Kumar (DeepikaKumar)
HCL

HCL
NL

Hi Mahab,


Thanks for the response. Yes, the issue i meant was when we change the zoom percentage. Not anything to do with the screen resolution. 

We have added a custom image, but facing an issue when the zoom is less than 100%. The image does not adjust to still display on the full screen. It starts reducing in size and leaves a blank space in the remaining part of the screen. That would be the difference you can see in the 2 images that i have attached.


Thanks,

Deepika Kumar
Posted: 2 years ago
Posted: 8 Jan 2019 10:44 EST
Bhuvana Mahalingam (mahab_GCS)
PEGA
Principal GCS Solutions Engineer
Pegasystems Inc.
US

Hi Deepika


Try to use the custom image from the UI gallery sample instead of yours and see if you can still reproduce the issue.


 
Posted: 2 years ago
Posted: 9 Jan 2019 6:48 EST
Deepika Kumar (DeepikaKumar)
HCL

HCL
NL

Hi Mahab,


I have tried using the existing images from Pega instead of our custom image and I see that the image gets smaller and leaves a grey space on the remaining part of the screen. The custom images were quite small though. 
Posted: 2 years ago
Updated: 2 years ago
Posted: 9 Jan 2019 14:24 EST
Updated: 9 Jan 2019 14:23 EST
Bhuvana Mahalingam (mahab_GCS)
PEGA
Principal GCS Solutions Engineer
Pegasystems Inc.
US

Hi Deepika


If you look in the UI gallery, they mention that the image/icon is used to invoke some action from them. I don't think you are using images in your application in this context which explains why your image is not small. 


In order to accomplish what you need, you may have to look for solutions outside of Pega. Search on stackoverflow or google to see if you can incorporate css changes to achieve what you want.


https://stackoverflow.com/questions/22492498/css-resize-zoom-in-effect-on-image-while-keeping-dimensions


Bhuvana.