Forum | Appery.io

Hi!
I'm trying to increase the size of an image in a list item. If I change it into a thumbnail, it becomes too big, and the icon is too small. I've added this script in the load event:

Appery("list_item_ol").find("img").css({"height":"100%", "width": "100%"});

where "list_item_ol" contains the image I want to resize. However, the script only works if the Image type is set to "thumbnail" in the properties tab. I've uploaded two pictures, one of what I have, and one of what I want to have. Please help! My coding skills are not that great :S

Hi Victor -

What would be the desired result in your case? Could you please show it with screenshots?

My desired result is on the lower picture that I uploaded. I made it in photoshop so that you guys have a better picture of what I am trying to accomplish. So I haven't been able to code it yet.

So what I want to do is to make the image in the list item a bit bigger without making it into a thumbnail.

Do you need more information?

Hi Viktor,

Please try this code:

pre

//Where "list_item_ol" is your list item component name.
jQuery('[name="list_item_ol"]').find("img").css({"height":"100px", "width": "100px"});

/pre

Also you should adjust your image with certain image size.

If you can not get it work please give is your app public link and describe steps to reproduce your problem in your app.

Regards.

Hi!
It doesn't work, I'm afraid. When I turn the image into a thumbnail it works, and I am able to adjust the size. But I want to use it with the image as an icon, so that it looks like the picture I posted (so that the list elements stay the same size). Is there maybe some way to increase the size of the background like when editing button icon size?

My public link is:
http://appery.io/app/mobile-frame?src...

But you have to log in to access the page. Should I email you a username and a password?

When you log in you can see the problem directly; the icons being too small.

Regards,

Hi Victor,

Here is a code for you:

pre

jQuery('[name="list_segment"] img').css({width: "40px", height: "40px", "max-width": "40px", "max-height": "40px", top: "1px"})

jQuery('[name="list_segment"] h3').css({"margin-left": "20px"})

/pre

Also, you need to run this javascript after your list was populated.

Regards.

Great!
This was just what I needed, thanks a lot!

Regards,