CODEWITHSUNDEEP
androidhtmlgoogle-chrome
AllisonC
AllisonC

Reputation: 3099

Why is overflow:hidden not working on android tablet?

html chrome on pc

<div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 56.25px; top: 63.75px; height: 97.5px; width: 67.5px; overflow: hidden; z-index: 6; border-radius: 50% " ondrop="drag_drop_drop(event, this)" ondragover="drag_drop_allow_drop(event)" onclick="photos_add_selected_fid(this);">
  <img src="system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" width="341" height="256" style="left: 0px; top: 0px; position: relative;" class="ui-draggable">
</div>

html default browser on html tablet

<div id="opening_0" style="background-color: #bfbfbf; position: absolute; left: 56.25px; top: 63.75px; height: 97.5px; width: 67.5px; overflow:hidden; z-index: 6; border-radius: 50%" ondrop="drag_drop_drop(event, this)", ondragover="drag_drop_allow_drop(event)" onclick="photos_add_selected_fid(this);">
  <img src="system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" style="left:0px; top:0px; position: relative;" width="341" height="256" class="ui-draggable">
</div>

EDIT: I had a typo for the second overflow tag (I had to type the source code in manually from the tablet to here). When I fixed that, both jsfiddle's showed the image as expected, however, the android tablet still is not.

This is what it looks like on the tablet: enter image description here

Upvotes: 0

Views: 334

Answers (2)

AllisonC
AllisonC

Reputation: 3099

<div id="opening_0" style="position: absolute; left: 56.25px; top: 63.75px; z-index: 6;" ondrop="drag_drop_drop(event, this);" ondragover="drag_drop_allow_drop(event);" onclick="photos_add_selected_fid(this);">
  <div id="2_opening_0" style="overflow: hidden;  border-radius: 50% ">
    <div id="3_opening_0" style="background-color: #bfbfbf; height: 97.5px; width: 67.5px; ">
      <img src="/system/photo/cf_preview/98f4fddef8c79235b534de4d303b2713" width="341" height="256" style="position: static; margin-left: 0px; margin-top: 0px;" class="ui-draggable">
    </div>
  </div>
</div>

I basically had to create 2 more divs inside the opening_0 div. The tablet didn't like positioning other than static in the image tag.

Upvotes: 0

gegobyte
gegobyte

Reputation: 5545

There is a typo in the second code snippet(html tablet)

Overflow property is set to hiden.

Upvotes: 1

Related Questions