circle image

Mon Jun 29, 2015 7:26 am

Hi Team,
do you think this is a bug? when i enter these in css:
code
.mypic {
border-radius:50%;
position: relative;
display: block;
margin: 10px auto;
box-shadow: 0px 0px 0px 4px #4b4b4b, 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
width: 50px;
height: 50px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/code
the image is becoming circle which is i like to post.
but when i put the image component to the listview the image return some point screenshot is in below:

https://d2r1vs3d9006ap.cloudfront.net...

but when i remove it to the listview the image is becoming perfect circle.screenshot is in below w/o a listview:
https://d2r1vs3d9006ap.cloudfront.net...

what do you think is the problem in listview?i need the listview hehe
any help here please?

Thank you,
She

Mon Jun 29, 2015 9:07 am

Hi She -

List component CSS styles are inherited in this case.

Mon Jun 29, 2015 9:32 am

Hi Illya,
what do you mean? so how can i fix this problem?

Thank you,
She

Tue Jun 30, 2015 1:09 am

update?

Tue Jun 30, 2015 1:37 am

Ignore this, i changed the code into:
code
.mypic {
border-radius: 50px;
border-top-left-radius: 50px !important;
border-bottom-left-radius: 50px !important;
box-shadow: 0px 0px 0px 4px #4b4b4b, 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
width: 70px;
height: 70px;
margin-top: 5px;
margin-left: 5px;
}
/code

Tue Jun 30, 2015 1:38 am

Hi Team,
Ignore this,I already figured it out. i changed the code into:
code
.mypic {
border-radius: 50px;
border-top-left-radius: 50px !important;
border-bottom-left-radius: 50px !important;
box-shadow: 0px 0px 0px 4px #4b4b4b, 0px 0px 5px 5px rgba(0, 0, 0, 0.3);
width: 70px;
height: 70px;
margin-top: 5px;
margin-left: 5px;
}
/code
Thank you,
She