4

I'm going to create a timeline component and I have the following template

<ul *ngIf="alerts!=undefined" class="timeline">
        <li *ngFor="let alert of alerts; let i=index" [class.timeline-inverted]="i % 2 == 1">
            <div class="timeline-badge">
                <span>{{alert.type}}</span>
            </div>
            <div class="timeline-panel">
                <div class="timeline-body">
                    <p>{{alert.id}}</p>
                </div>
                <div class="timeline-footer">
                    <p class="">{{alert.date}}</p>
                </div>
            </div>
        </li>
    </ul>

The corresponding .scss file is like

.timeline {
    list-style: none;
    padding: 10px 0;
    position: relative;
    font-weight: 300;
    border-style: solid;
    border-width: medium;
}
.timeline:before {
    top: 0;
    bottom: 0;
    position: absolute;
    content:" ";
    width: 6px;
    background: $magenta;
    left: 50%;
    margin-left: -3px;
}
.timeline > li {
    margin-bottom: 40px;
    position: relative;
    width: 50%;
    float: left;
    clear: left;
}
.timeline > li:before, .timeline > li:after {
    content:" ";
    display: table;
}
.timeline > li:after {
    clear: both;
}
.timeline > li > .timeline-panel {
    width: calc(100% - 35px);
    width: -moz-calc(100% - 35px);
    width: -webkit-calc(100% - 35px);
    float: left;
    border-radius: 5px;
    background: $white;
    position: relative;
}
.timeline > li > .timeline-panel:before {
    position: absolute;
    top: 26px;
    right: -15px;
    display: inline-block;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    content:" ";
}
.timeline > li > .timeline-panel:after {
    position: absolute;
    top: 27px;
    right: -14px;
    display: inline-block;
    border-top: 14px solid transparent;
    border-left: 14px solid $white;
    border-right: 0 solid $white;
    border-bottom: 14px solid transparent;
    content:" ";
}

The <ul> tag is not filled by those <li> tag created by *ngFor which makes the "line" of the timeline disappear.

screenshot

The black border is the border of the <ul> tag, which is suppose to wrap all <li> tags below it and have the magenta line go through all bubbles.

Bing Lu
  • 3,232
  • 7
  • 30
  • 38

2 Answers2

1

You problem is in CSS

when you use float on li, it actually remove it from the document flow.

By using Overflow:hidden, it will somehow fix this issue.

you can read this answer

Community
  • 1
  • 1
maxisam
  • 21,975
  • 9
  • 75
  • 84
  • `li` is going to be a direct child of the `ul` in any case. So this is not a problem here. – dfsq Jun 29 '16 at 22:28
  • I know it, but you can try it yourself. It would be really strange if Angular was producing invalid markup from valid template, wouldn't it? But of course it doesn't. – dfsq Jun 29 '16 at 22:33
  • i see, you are correct. it is actually more like inserting a template node in front of it not wrapping of li – maxisam Jun 29 '16 at 22:35
  • I think your problem is more like css issue. I think you can try having overflow:hidden on ul, which is .timeline – maxisam Jun 29 '16 at 22:38
  • @maxisam Thanks, add `overflow:hidden` on `
      ` tag works! could you explain a little bit more? With `overflow:hidden`, those `
    • `s are not hid at all. How does it works for the `
        ` tag?
     – Bing Lu Jun 30 '16 at 02:51
0

Your problem is not with CSS, is it with angular structural directives. Please read this article,

https://angular.io/guide/structural-directives#group-sibling-elements-with-ng-container

I believe, you will find solution there.

Saiful Islam
  • 124
  • 2
  • 14