I want to make a timeline but it has broken structure. I think that is because of display:inline
, and if I tried to do that to my site, it would break it.
display: inline-block
also funks it up.
I tried to display: inline
to the overall
div containing the timeline and that didn't work. So then I did it to all the divs that were also in the timeline and that didn't work either.
Timeline:
<span class = "timelinefull">
<div ng-controller="MainController">
<div class="timeline">
<!-- ANCHOR DOT -->
<div class= "dot">
<div ng-mouseover="infoIsVisible = true" ng-mouseleave="infoIsVisible = false" ng-mouseover="getCoords(event)">
<img class="icon" ng-src="img/icon_dot.png" height="30px" width="30px">
</div>
<div class="info label label-info" id="info" ng-show="infoIsVisible">
<p>Was born</p>
</div>
</div>
<!-- REST OF MY DOTS -->
<div class="dot" ng-repeat="timelineEvent in timelineEvents">
<timeline-info info="timelineEvent"></timeline-info>
</div>
</div>
</div>
</span>
Template for ng-repeat:
<div class="timeline-inner" ng-init="infoIsVisible= false">
<img class="line" src="components/timeline/template-timeline/img/line.png" height="5px" width="{{ info.months }}">
<div ng-mouseover="infoIsVisible = true" ng-mouseleave="infoIsVisible = false" ng-mouseover="getCoords(event)">
<a href="{{ info.link }}">
<img class="icon" id="icon" ng-src="{{ info.icon }}" height="30px" width="30px">
</a>
</div>
</div>
<div class="info label label-info" id="info" ng-show="infoIsVisible">
<p>{{ info.description }}</p>
<p style="font-size: 8px"> Click for more info </p>
</div>
CSS
.timelinefull {
display: inline;
}
.timeline-inner {
display: inline;
}
.info {
display: inline;
padding-top: 10px;
position: absolute;
z-index: 100;
-webkit-transition:all linear 0.3s;
transition:all linear 0.3s;
}
.line {
box-shadow: 0 0 0 2px rgba(0,0,0,.05);
margin-left: -5px;
margin-right: -5px;
}
.info.ng-hide {
opacity:0;
}
a:link {
text-decoration: none;
}
Thanks for the help!
You have 3 options, to choose for the display
property of an element in CSS:
Inline elements:
Block elements:
Inline-block elements:
So, it's better to put display:inline-block
for elements with these classes:
like this:
timeline dot, timeline timeline-inner{
display: inline-block;
}
Please dont forget to put enough time to provide a summarized, though useful version of your code, including Markup and CSS, to let people reproduce final results.
Try adding the following to your CSS
.timeline, .timeline .dot, .timeline-inner, .timelinefull {
display:inline-block;
}
.timeline, .timelinefull {
width:100%;
}
Update:
Shot in the dark, without a snippet..
Could you add to your css
.dot .timeline-inner {
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
The above code will vertically center .timeline-inner
. From your screenshot it seems because the elements are now display-inline
they only take up as much space as they need (the correct behaviour), however, you need the elements to align vertically centered within the timeline
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With