Page 1 of 1

Change size of list image (icon)

Posted: Sun Nov 16, 2014 6:59 pm
by Victor Malm

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

Image

Image


Change size of list image (icon)

Posted: Sun Nov 16, 2014 8:16 pm
by Illya Stepanov

Hi Victor -

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


Change size of list image (icon)

Posted: Sun Nov 16, 2014 8:50 pm
by Victor Malm

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?


Change size of list image (icon)

Posted: Mon Nov 17, 2014 3:59 am
by Yurii Orishchuk

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.


Change size of list image (icon)

Posted: Mon Nov 17, 2014 9:48 am
by Victor Malm

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,


Change size of list image (icon)

Posted: Mon Nov 17, 2014 11:43 pm
by Yurii Orishchuk

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.


Change size of list image (icon)

Posted: Tue Nov 18, 2014 12:24 am
by Victor Malm

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

Regards,