Forum | Appery.io

hello
I drop a image into the list component,and set the css "roundedphoto".
but it will be something wrong.

I test another image component without into list,and set the same css "roundedphoto" .
It will be ok.(I hope the image will be a circle shape.)

can you help me to figure out or suggest another way to do that?

Hello,

Please specify the following
1) Styles you have applied;
2) Name of list, listitem, grid, cell, and image components.

Dear Alena
1) Styles you have applied;
=iOS-like ,swatch:c

2) Name of list, listitem, grid, cell, and image components.
=Name of list:mobilelist_80
listitem:mobilelistitem_81
grid:mobilegrid_101
cell:mobilegridcell_102
image:image

css:
.roundedphoto {
-webkit-border-radius: 600px;
-moz-border-radius: 60px;
border-radius: 60px;
}

Hello!

Your css is too "light" from the css "weight" selector point of view
https://css-tricks.com/specifics-on-c...
http://blog.bismallion.com/appery-tut...

try next selector
.roundedphoto, .ui-listview li.ui-last-child img:first-child:not(.ui-li-icon) {
-webkit-border-radius: 600px;
-moz-border-radius: 60px;
-webkit-border-bottom-left-radius: 100px;
border-radius: 100px;
border-top-left-radius: 100px;
}

thank you Evgene
I try your suggestion,it does work!!
but now only the first one image will be circle shape.
and the latter still the same.
how should I change the css code?

Hi Spark,

Please try following CSS:

pre

html body .roundedphoto, .ui-listview li img:first-child:not(.ui-li-icon) {
-webkit-border-radius: 600px;
-moz-border-radius: 60px;
-webkit-border-bottom-left-radius: 100px;
border-radius: 100px;
border-top-left-radius: 100px;
}

/pre

Regards.

Yurii
Thanks for your help!!!!
It dose work~

Yurii
Something wrong!
today I reopen the app to test,the shape of list's photo back to the previous shape.
did the yesterday update make something happen?
please help methanks!!

Hi Spark
1) you should see the actual result right away in the editor
http://gyazo.com/9915015f525404a0e571...

2) try to increase value for border-radius
3) place image in the grid

Dear Egor
I try to increase value for border-radius ,but it still no working.

I use the same code was working yesterday,please see the reply above.
why it suddenly not working today,because I didn't edit anything today.
thanks for your kindly help!