Display li elements inline with correct automatic height [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

I'm trying to customize this theme. (scroll down on the dashboard to see the timeline example) I'm trying to make the timeline shift up a little (to fill the gap on the empty side). I tried making timeline > li:before and after to use display: inline-table however each element still takes a whole row with incorrect height set rendering buttons on the bottom of the panel useless. Can you suggest me a starting point on how I can automatically set the correct height and allow them to be more compact?

Answer 1

I was able to get a little space, but not much by adding these two lines to the stylesheet:

.timeline > li:not(:first-child) > .timeline-panel {
    top: -50px;
}


.timeline > li:not(:first-child) > .timeline-badge {
    top: -35px;
}

This, however affected all the timeline badges and panels except for the first one, which is good. But the overlap you require won't be seen except on the second child. After that the behavior is the same: all the timeline elements have empty space on the opposite side of the timeline.

It's going to be tough with the display: table on the li element. If you were using a CSS processor like SASS you could try a mixin and hack something together like this:

@mixin timeline-badge($index) {
    top: ($index * -35);
}

@mixin timeline-panel($index) {
    top: ($index * -35) - 15;
}

.timeline > li:nth-child(1) > .timeline-panel {
    @include timeline-panel(1);
}

.timeline > li:nth-child(2) > .timeline-panel {
    @include timeline-panel(2);
}

// repeat for nth-child 3-???

.timeline > li:nth-child(1) > .timeline-badge {
    @include timeline-badge(1);
}

.timeline > li:nth-child(2) > .timeline-badge {
    @include timeline-badge(2);
}

// repeat for nth-child 3-???

Of course, if you expect something like 50 timeline elements you're going to have a lot of extra lines in your .scss file.