CODEWITHSUNDEEP
angularjscss
s4tr2
s4tr2

Reputation: 415

Setting height property to 0 when there is no element

I am trying to make a timeline for changeLogs and giving data to the timeline from AngularJS controller. My problem is that the timeline "Line" height is set to 6px. So, when there is no data in the controller, It is still showing a 6px line in the view.

What I want instead is that when there is no data, the line should have 0px height but when there is data it should have 6px height.

Here is the excerpt from CSS

.timeline {
        position: relative;
        padding: 1em 0;
        list-style-type: none;
        overflow-x: hidden;
    }

    .timeline:after {
        position: absolute;
        left: 120px;
        top: 0;
        content: ' ';
        display: block;
        width: 6px;
        height: 100%;
        background: #636e72; /*Color of horizontal line*/
        z-index: 5;
    }

Here is the Excerpt from the HTML

<ul class="timeline">
   <li ng-repeat="log in changelogCtrl.logs | orderBy: '-dateObj'">
           <span class="direction-l">
              <span class="flag-wrapper">
                   <span class="flag">
                       <span class="time-wrapper">
                          <span class="time">
                             {{log.date}}
                          </span>
                       </span>
                  </span>
             </span>
          </span>
          <div class="direction-r move-left">
              <div class="flag-wrapper">
                  <div class="flag">
                     <strong>{{log.module}}</strong>&nbsp;<strong class="fa fa-long-arrow-right"></strong>&nbsp;{{log.subModule}}
                  </div>
              </div>
              <div class="desc">
                 {{log.desc}}
              </div>
              </div>
          </li>
       </ul>

Upvotes: 1

Views: 57

Answers (1)

Athul Nath
Athul Nath

Reputation: 2606

Try this 

.timeline {
        position: relative;
        padding: 1em 0;
        list-style-type: none;
        overflow-x: hidden;
    }

    .timeline:not(:empty):after {
        position: absolute;
        left: 120px;
        top: 0;
        content: ' ';
        display: block;
        width: 6px;
        height: 100%;
        background: #636e72; /*Color of horizontal line*/
        z-index: 5;
    }
	
<p class="timeline"></p>	<!--with out content-->
<p class="timeline">with content</p>

Upvotes: 1

Related Questions