Page 1 of 2

Images display full-size when testing

Posted: Sat Feb 15, 2014 12:25 am
by 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?


Images display full-size when testing

Posted: Sat Feb 15, 2014 12:34 am
by Alena Prykhodko

Hello Sean,

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


Images display full-size when testing

Posted: Sat Feb 15, 2014 12:53 am
by 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 Image


Images display full-size when testing

Posted: Sat Feb 15, 2014 5:31 am
by 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.


Images display full-size when testing

Posted: Sat Feb 15, 2014 3:20 pm
by 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!


Images display full-size when testing

Posted: Sat Feb 15, 2014 3:35 pm
by 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?


Images display full-size when testing

Posted: Sun Feb 16, 2014 1:55 am
by 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).

Image

Image


Images display full-size when testing

Posted: Sun Feb 16, 2014 6:13 am
by Alena Prykhodko

Sean,

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


Images display full-size when testing

Posted: Sun Feb 16, 2014 6:34 am
by Sean Doherty

Hi Alena,

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

Thanks again for your help!


Images display full-size when testing

Posted: Sun Feb 16, 2014 7:41 am
by 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...