1

I have the following regular html which renders correctly:

<div class="media-left">
                      <div class="user-wrapper">
                        <img src="myimage.jpg"  class="img-circle" width="80">
                        <div><a href="#">Some entry</a></div>
                        <div class="date">Now</div>
                      </div>
                    </div>

I then have another snippet that is rendered in an angular for loop using a controller: 

<div class="media-left">
                      <div class="user-wrapper">
                        <img ng-src="myimage.jpg"  class="img-circle" width="80" src="myimage.jpg">
                        <div><a href="#" class="ng-binding">some entry</a></div>
                        <div class="date"></div>
                      </div>
                    </div>

Here is my css:

ul.timeline-list > li.media > .media-left {
  text-align: center;
  position: relative;
  z-index: 2;
}
ul.timeline-list > li.media > .media-left .user-wrapper {
  width: 120px;
}
@media (min-width: 480px) {
  ul.timeline-list > li.media > .media-left {
    margin-left: -20px;
  }
  ul.timeline-list > li.media > .media-left img {
    margin-top: 20px;
  }
}
@media (max-width: 480px) {
  ul.timeline-list > li.media > .media-left {
    left: 50%;
    margin-left: -60px;
    margin-top: 0px !important;
  }
}
ul.timeline-list > li.media > .media-left a {
  background: #ffffff;
  font-weight: bold;
  border: 1px solid #e8e8e8;
  padding: 4px 4px;
  border-radius: 5px;
  margin-top: 5px;
  display: inline-block;
}
ul.timeline-list > li.media > .media-left .date {
  background: #ffffff;
  font-weight: bold;
  padding: 4px;
  border: 1px solid #e8e8e8;
  color: #bdbdbd;
  border-radius: 5px;
  font-size: 12px;
  margin-top: 5px;
  display: inline-block;
}

ul.timeline-list > li.media > .media-left .user-wrapper {
  width: 120px;
}

when i remove the "media-left" class from the working entry, it looks exactly like the distorted image.

Here is what it looks like with the top working and bottom misaligned:

enter image description here

I followed @E.King advice below and added:

.container {
  font-size: 0px;
  letter-spacing: 0px;
  word-spacing: 0px;
}

.container > div {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  font-size: 15px;
  letter-spacing: 1em;
  word-spacing: 2em;
}

<div class="media-left container">

And the format is much closer with the icon now aligned center, but how can I make the icon go above the grey bar?:

enter image description here

What am I doing wrong that the second entry has a distorted format?

Atma
  • 29,141
  • 56
  • 198
  • 299
  • 2
    Does the class `ng-binding` have any CSS that would throw off the formatting? Is your `date` div possibly not rendering correctly because it is empty in the second example? It's tough to know without any idea what exactly "distorted" means. – Tyler Roper Dec 14 '16 at 23:40
  • 1
    Provide the CSS and maybe we could tell you. – Heretic Monkey Dec 14 '16 at 23:42
  • @MikeMcCaughan I added the css. when i remove the "media-left" class from the working entry, it looks exactly like the distorted image. – Atma Dec 14 '16 at 23:53
  • Is there a reason you are using `width="80"` instead of `style="width: 80px;"` ? I wouldn't recommend inline style anyway, but the second option is better if you choose to do them. Not sure if this will fix your issue but it stuck out to me. – carmouche Dec 14 '16 at 23:59
  • @Santi I do not have any ng-binding conflicts. – Atma Dec 15 '16 at 00:07

1 Answers1

0

Have you tried adding !important to the .media-left margin-left? Maybe some further CSS is getting applied after the initial render and overriding the margin behavior you set.

It could also be a problem with whitespace, as per: Angularjs List Item Margin Issue Combining ng-repeat elements with static ones

As per other issues with ng-repeat, it looks like your CSS class simply isn't being applied after the element is rendered. This is somewhat common with positioning in ng-repeat. You could try using ng-class or ng-style directly to set the correct margin and z-index as per this answer.

Community
  • 1
  • 1
estacks
  • 104
  • 4