CODEWITHSUNDEEP
androidcsscordova
Jeffha77
Jeffha77

Reputation: 169

Overflow hidden not working on Android

I have a picture displaying in a DD which has rounded corners. When I build it and get it on an android device the overflow:hidden doesn't work and the full picture shows over the dd. Anyone else have this issue and know a workaround/fix?

This is the CSS for the DD. 

.empImage {
    position:absolute;
    width:90px;
    height:110px;
    top:0;
    right:0;
    overflow: hidden;
    background-color: #eaeaea;
    border: #f26122 solid thin;
    -moz-border-radius: 15px;
    border-radius: 25px;
    -moz-box-shadow: -5px 0px 5px #666;
    -webkit-box-shadow: -5px 0px 5px #666;
    box-shadow: -5px 0px 5px #666;
}

Upvotes: 9

Views: 11551

Answers (2)

thagorn
thagorn

Reputation: 747

Overflow:hidden doesn't work on android when the element is relative or absolute position.

The simplest workaround is to have an outer element with relative/absolute and an inner element with the overflow.

<div style="position:absolute">
  <div style="width:100%; height:100%; overflow:hidden">
    <img>
  </div>
</div>

Upvotes: 14

Jeffha77
Jeffha77

Reputation: 169

Had to wrap the image in 2 divs/sections/dd and put overflow:hidden on the inner one. In this case the section.

Before(didnt work)

<dd><img></dd>

Now(works)

<dd><section><img></section></dd>

Upvotes: -6

Related Questions