Skip to content

ionList - reordering - items don't display at the correct offset when parent has position:absolute #1583

Closed
@stefek99

Description

@stefek99

discrepancy

Video describing the issue: https://www.youtube.com/watch?v=ZuSjoCeBE1c
Code http://codepen.io/stefek99/pen/wtcnj

Taken form docs: http://ionicframework.com/docs/api/directive/ionList/ // http://codepen.io/ionic/pen/JsHjf

What I'm trying to achieve is mobile-like feel on a desktop and I'm using following CSS:

.device {
    position: relative;
    top: 50px;
    display: block;
    width: 395px;
    height: 813px;
    font-family: "Helvetica Neue", sans-serif;
    background-image: url("http://i.imgur.com/1h6ylig.png");
    background-repeat: no-repeat;
    background-position: -395px 0;
    background-size: 300%;
    margin: 0 auto;
  }

  .device .device-content {
    position: absolute;
    top: 117px; /* <-- that breaks */
    left: 37px;
    width: 321px;
    height: 569px;
    overflow: hidden;
    font-size: 17px;
    line-height: 21px;
    background-color: #fff;
  }

It's related to another issue created by me - #1534 - initially I was using an iframe, just like you do (via codepen) on the docs page - http://ionicframework.com/docs/api/directive/ionList/ - but I ended up using the CSS above.


I wonder if there is a simple fix to allow reordering items at correct heights.
Thank you
Michal

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions