yaboiduke yaboiduke - 3 months ago 9
CSS Question

Border-radius disappears with overflow rule

I have an issue with using the

overflow:visible;
rule on the Ionic Framework avatar
ion-item
. I would like to create a chat bubble with the user image next to it. I have succeeded in getting the image to overflow out of its parent but the result is the border-radius I have set on the
ion-item
disappears.Without the border radius the border appearscorrectly.

Here's what I'm getting.
Here's what I'm getting

And what I'm hoping to achieve.

The expected result

Here's my CSS

.item-content,.item, p {
overflow: visible;

}

.item-avatar {
margin-left:15%;
max-width: 50%;
border-radius: 10px;
margin-top:10px;

}

.item-avatar .item-content > img:first-child, .item-avatar-left {
left:-50px;
overflow: hidden;

}


Here is my view template..

<ion-view view-title="Chats">
<ion-content>
<ion-list>
<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
<img class = "avatar" ng-src="{{chat.face}}">
<h2>{{chat.name}}</h2>
<p>{{chat.lastText}}</p>
<p>{{chat.id}}</p>
<i class="icon ion-chevron-right icon-accessory"></i>

<ion-option-button class="button-assertive" ng-click="remove(chat)">
Delete
</ion-option-button>
</ion-item>
</ion-list>
</ion-content>
</ion-view>

Answer

If the child element has a background color and is set to the full width and height of the parent element, then the corners will be cut off.

Most likely, your child element doesn't need a background color, so removing it will solve your problem. On the off chance that it does need a background color, then just inherit the border radius from the parent element.

.item-avatar-child {
  border-radius: inherit;
}