Images display full-size when testing

[Sean Doherty]

I have added several images to my app using the image component and have kept the size 100px by 100px. When I test the app, the pictures appear in their original file size. The only CSS I have added so far is to modify one specific image on the start screen. That image is displaying correctly, but none of the images on other pages are, yet I am not sure how my CSS specific to that image and the start screen would affect other images? Could I have some help with this please?

[Alena Prykhodko]

Hello Sean,

Could you please post your CSS code and a screen shot of any of those Image components Properties.

[Sean Doherty]

Hi Alena,

Here is the CSS and the screen shot:

Appery('mainimage_2').attr("style", "width: 100% !important; height: 100% !important; ");
Appery('mainimage_2').show();
Appery('mainimage_2').css('position', 'absolute');
Appery('mainimage_2').css('margin', 'auto');
Appery('mainimage_2').css('align', 'center');
Appery('mainimage_2').css('top', '-20px');
Appery('mainimage_2').css('left', '-2px');
Appery('mainimage_2').css('z-index', '99999');
Appery('mainimage_2').refresh();
$(".startScreen").triggerHandler('updatelayout');

The

[Alena Prykhodko]

Sean,

I've tested and could not reproduce, works just fine.
You can try to delete event with code above, save changes, clear the browser cache, log in and recreate event.

[Sean Doherty]

Hi Alena,

Thank you for testing. I deleted the CSS, saved, cleared the browser cache, logged back in and deleted the images, then put back 1 image, but ran without putting back the CSS and am still experiencing the same issue.

Could you clarify what you are referring to when you say delete "event" and recreate "event" please? Are you referring to the image component or the code, or to the appery functionality of "event" which controls the navigation between pages, etc. Thank you!

[Alena Prykhodko]

The code you've posted above works if you Run it as JS on Screen Load event.
Probably I didn't catch your idea, please specify where do you run it?

[Sean Doherty]

Hi Alena,

I may not have had that event set to run as JS on Screen Load, so I will adjust that, thanks! However, my issue is with another page that is not associated to any code. I have just added images within a grid on the page. I removed all images, cleared cache, logged in and out, then I added one image and the issue still remains. Here is a screenshot of my build, with the image set to 100px X 100px, yet the image in the Appery Test Screen shows at full size beyond the screen of the phone (second screenshot).

[Alena Prykhodko]

Sean,

Please give us a public link http://docs.appery.io/documentation/s...

[Sean Doherty]

Hi Alena,

Here is the link: http://appery.io/app/mobile-frame?src...

Thanks again for your help!

[Alena Prykhodko]

Sean,

As I can see you've made changes on Source tab, to fix delete startScreen.css file and make Undo all source changes for WEB_RESOURCES folder http://docs.appery.io/tutorials/sourc...

Then you will need to recreate CSS for Startscreen, better to use CSS asset http://docs.appery.io/documentation/w...