Sophie Rhodes Sophie Rhodes - 3 months ago 10
Javascript Question

Spacing gaps in Vertical border left

The current example uses a pseudo class to draw a line with small elements for main titles and sub titles. Every element which has a class

line
will require a line on the left hand side.

Problem: i am having to increase the height to
200%
to make it work. When the content is increased, that line extends further than it should.

As soon as the content increases, the timeline extends further: https://jsfiddle.net/ss189uva/

Is there a possibility of implementing this through
jquery
? as this needs to be flexible enough to withstand content areas and automatically adjust.

Original example:



p {
margin: 0;
padding: 0;
}
.view-timeline-block {
padding: 0 5em;
line-height: 28px;
}
.view-timeline-block .ml-container {
padding-left: 25px;
}
.view-timeline-block .line {
position: relative;
}
.view-timeline-block .line:after {
background: black none repeat scroll 0 0;
content: "";
height: 200%;
left: -19px;
position: absolute;
top: -15px;
width: 5px;
}
.view-timeline-block .active {
position: relative;
}
.view-timeline-block .active:after {
background-color: white;
border: 5px solid black;
border-radius: 50%;
content: "";
height: 8px;
left: -25px;
position: absolute;
top: 6px;
width: 8px;
z-index: 100;
}
.view-timeline-block .active-small {
position: relative;
}
.view-timeline-block .active-small:after {
background: black none repeat scroll 0 0;
border-radius: 50%;
content: "";
height: 12px;
left: -23px;
position: absolute;
top: 9px;
width: 12px;
}

<div class="view-timeline-block">
<div class="main-listing">
<div class="title active">Testing name</div>
<div class="content line">
<p>testing name content</p>
</div>
<div class="sub_name active-small">asdasdasdasd</div>
<div class="sub_content line">
<p>testing sub name content</p>
</div>
</div>
<div class="main-listing">
<div class="title active">Timeline 2 name</div>
<div class="content line">
<p>timeline 2 content</p>
</div>
<div class="sub_name active-small">Timeline 2 sub name</div>
<div class="sub_content ">
<p>timeline 2 sub content</p>
</div>
</div>
</div>




Answer

Just omit height altogether and specify at least two (2) opposing positional properties for the dimension you want to set: https://jsfiddle.net/ss189uva/2/

.view-timeline-block .line:after {
    background: black none repeat scroll 0 0;
    content: "";
    left: -19px;
    position: absolute;
    top: -15px;
    bottom: -15px;
    width: 5px;
}

This is taking advantage of the fact that absolutely positioned elements can be given dimension if enough properties are specified:

From MDN's documentation for position:

Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width.