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.
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.
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
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.
Related
I am trying to create an ordered list of tasks. As each task is completed, the task turns green, and the line becomes solid. I am looking for help on the static example below.
I have seen some examples of doing this, but I am struggling with the lines and colors. If I use ul li.circle:after for the circle, and ul li.circle:before for the line, I can get it to connect, but they all become solid lines, I cant figure out how to interchange with a dotted line. I would like to use list items to define the line, and color of circle.
In the css there is padding: 0 0 20px 50px; which is why the lines do not connect to the dots as desired, but without the padding, there is no spacing between. To change the color, I can change the color of all, using before/after but I cannot add another class as shown below for the color.
The start css class should be a line with a top, like a letter T, and the arrowDown should have a stem to connect to the dotted line.
The CSS File and lay out of the page:
.red {
background: #ff0000;
}
.green {
background: #00ff00;
}
.start {
/* polygon? T like shape*/
}
ul {
max-width: 400px;
margin: 0 auto;
list-style-type: none;
margin: 0;
font-family: sans-serif;
color: #ffffff;
}
ul li {
padding: 0 0 20px 50px;
position: relative;
margin: 0;
}
/* Circle */
ul li.circle:after {
position: absolute;
color: #ccc;
top: 0;
left: 0;
content: '';
border: 2px solid #fff;
border-radius: 50%;
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
background: #000000;
}
/* Circle
ul li.circle:before {
position: absolute;
left: 10px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px solid #ffffff;
}
*/
/* Line */
ul li.line:before {
position: absolute;
left: 10px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px solid #ffffff;
}
/* dottedLine */
ul li.dottedLine:before {
position: absolute;
left: 10px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px dotted #ffffff;
}
/* Missing the stem */
ul li.arrowDown:after {
position: absolute;
transform: rotate(45deg);
top: 10px;
left: 4px;
content: '';
display: inline-block;
text-align: center;
line-height: 24px;
border: solid #ffffff;
border-width: 0px 3px 3px 0px;
display: inline-block;
padding: 6px;
}
<li>
<li class="start">Monday</li>
<li class="line"></li>
<li class="circle green">Task 1</li>
<li class="line"></li>
<li class="circle green">Task 2</li>
<li class="dottedLine"></li>
<li class="circle red">Task 3</li>
<li class="dottedLine"></li>
<li class="arrowDown">Tuesday</li>
</ul>
Please see the attached for desired output from above.
enter image description here
Firstly your opening ul is a li
Then to style as you want you would need to add a height to .line and .dottedline classes like so.
ul li.line, ul li.dottedLine {
height: 20px
}
make you padding padding: 0 0 10px 50px; for ul li
For you start class use a before pseudo class
For you circle background colour add the color to the ul li.circle:after and then over ride it for ul li.red:after
Here is the code with adjustments
body {
background: black;
}
.red {
/* Not needed add color to pseudo element
* background: #ff0000;*/
}
.green {
/* Not needed add color to pseudo element
* background: #00ff00;*/
}
.start {
/* See below: ul li.start:before */
}
ul {
max-width: 400px;
margin: 0 auto;
list-style-type: none;
margin: 0;
font-family: sans-serif;
color: #ffffff;
}
ul li {
padding: 0 0 10px 50px;
position: relative;
margin: 0;
}
/* Circle */
ul li.circle:after {
position: absolute;
color: #ccc;
top: 0;
left: 0;
content: '';
border: 2px solid #fff;
border-radius: 50%;
height: 24px;
width: 24px;
text-align: center;
background: #00ff00;
}
ul li.red:after {
background: #ff0000;
}
/* Line */
ul li.line {
list-style-type:none;
}
ul li.line, ul li.dottedLine {
height: 20px;
}
/* make the first line which is 2nd child 0 */
ul li:nth-child(2) {
height: 10px;
}
ul li.line:before {
position: absolute;
left: 13px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px solid #ffffff;
}
/* dottedLine */
ul li.dottedLine:before {
position: absolute;
left: 13px;
top: 0px;
content: "";
height: 100%;
width: 0;
border-left: 2px dotted #ffffff;
}
/* Start T top added */
ul li.start:before {
position: absolute;
content: "";
width: 26px;
left: 0;
top: 24%;
border-top: 2px solid #ffffff;
background: white;
}
/* Missing the stem
* stem added with pseudo class
* start:after slightly modified below
*/
ul li.start:after, ul li.arrowDown:before {
position: absolute;
left: 13px;
top: 0px;
content: "";
height: 90%;
width: 0;
border-left: 2px solid #ffffff;
}
ul li.start:after {
top: 24%;
height: 78%;
}
ul li.arrowDown:after {
position: absolute;
transform: rotate(45deg);
top: 10px;
left: 7px;
content: '';
display: inline-block;
text-align: center;
line-height: 24px;
border: solid #ffffff;
border-width: 0px 3px 3px 0px;
display: inline-block;
padding: 6px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ul>
<li class="start">Monday</li>
<li class="line"></li>
<li class="circle green">Task 1</li>
<li class="line"></li>
<li class="circle green">Task 2</li>
<li class="dottedLine"></li>
<li class="circle red">Task 3</li>
<li class="dottedLine"></li>
<li class="arrowDown">Tuesday</li>
</ul>
</body>
</html>
In this fiddle I create a simple breadcrumb. I like to change the dependencies of class "div.arrow-right". I like to control the arrow size by "#sequence". So that the size of the arrow belongs to the font-size. That means if I change the font-size the right-arrow should fit automatically the same high as the div which contains the writing.
#sequence {
font-size: 28px;
}
And I like to add a gap or lets say a white thin arrow between two breadcrumb elements, see the picture below.
An alternate using :before and :after pseudo elements. Fiddle
.breadcrumb {
list-style: none;
overflow: hidden;
font-size: 28px;
}
.breadcrumb li {
color: white;
text-decoration: none;
padding: 8px 0 8px 50px;
position: relative;
display: block;
float: left;
cursor: pointer;
}
.breadcrumb li:after {
content: "";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid #74c476;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 2px;
left: 100%;
z-index: 1;
}
li:nth-child(1) {
padding-left: 20px;
background-color: #74c476;
}
li:nth-child(2) {
background-color: #61a362;
}
li:nth-child(3) {
background-color: #518851;
}
li:nth-child(1):after {
border-left-color: #74c476;
}
li:nth-child(2):after {
border-left-color: #61a362;
}
li:nth-child(3):after {
border-left-color: #518851;
}
<ul class="breadcrumb">
<li>hello</li>
<li>operator</li>
<li>layout</li>
</ul>
I arranged the main menu navigation using table property. Having anchor tag inside the li tag. And provided drop-down arrow for anchor tag using "after" method. Now I am facing an issue that my anchor tag not taking its parent li full height which has display: table-cell. And I can't set position absolute to my anchor as I already set position: relative to display arrow in its after.
The reason I need my anchor tag to get full height is. My menu may have two lines like 1. XXxxxxxxxx xxxxx 2.xxxxxx so the first link will come two line as no enough width. and second one will come in single line.
ul.tb-megamenu-nav.nav{
display: table;
width: 100%;
table-layout: fixed;
position: relative;
}
.tb-megamenu .nav > li.level-1 {
vertical-align: middle;
min-height: 48px;
float: none;
display: table-cell;
min-width: 16.56686626746507%;
position: static;
list-style: none;
}
.tb-megamenu .nav > li > a {
background-color: transparent;
padding: 8px 7%;
text-align: center;
color: #fff;
border: 0;
position: relative;
cursor: pointer;
}
.tb-megamenu .tb-megamenu-nav > li.dropdown > a:after {
content: "";
width: 0;
height: 0;
position: absolute;
top: 40px;
left: 50%;
margin-left: -14px;
border-top: 14px solid #0092d0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
z-index: 999999;
}
* {
outline: 1px solid blue;
}
ul.tb-megamenu-nav.nav {
display: table;
width: 100%;
table-layout: fixed;
position: relative;
}
.tb-megamenu .nav > li.level-1 {
vertical-align: middle;
min-height: 48px;
float: none;
display: table-cell;
min-width: 16.56686626746507%;
position: relative;
list-style: none;
}
.tb-megamenu .nav > li > a {
background-color: transparent;
padding: 8px 7%;
text-align: center;
color: #fff;
border: 0;
position: relative;
cursor: pointer;
display: block;
}
.tb-megamenu .tb-megamenu-nav > li.dropdown > a:after {
content: "➤";
width: 0;
height: 0;
position: absolute;
top: 40px;
left: 50%;
margin-left: -14px;
border-top: 14px solid #0092d0;
border-left: 14px solid transparent;
border-right: 14px solid transparent;
z-index: 999999;
}
<ul class="tb-megamenu-nav nav">
<li class="level-1"></li>
<li class="dropdown">
<a href='#'></a>
</li>
I have been using a sample timeline built using Bootstrap, and so far it works reasonably well, but upon resizing some of the layout doesn't quite line up. I've customized the code so that all of the timeline items are on the right of the line itself, and now I'm having issues lining up the icons for each item and also the final icon at the end.
I apologize for the messy fiddle, but here is my fiddle:
http://jsfiddle.net/36yt7srz/
You can see that on the final circle at the bottom, when the window is small it lines up roughly in the middle of the timeline, but when the window is resized it is out of sync with that line. I could use some media queries but I felt that this would inevitably end up with a circle which still will be out of line at some window sizes.
I'm looking for a way to essentially get the circle to just follow the line.
Here is the HTML:
<!-- content -->
<div class="col-md-12 content page">
<!-- header icon -->
<div class="col-xs-3">
<img class="img-responsive" src="http://s21.postimg.org/s3hybqfwz/icon.jpg">
</div>
<!-- header text -->
<div class="col-xs-9 schedule-header-text">
<img class="img-responsive" src="http://s27.postimg.org/4y34y273z/text.jpg">
</div>
<!-- Timeline -->
<div class="col-xs-12">
<ul class="timeline">
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Date</h4>
</div>
<div class="tl-body">
<p>Content</p>
<p><small class="text-muted"><i class="fa fa-map-marker"></i> Location</small></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ"></div>
<div class="timeline-panel">
<div class="tl-heading">
<h4>Date</h4>
</div>
<div class="tl-body">
<p>Content</p>
<p><small class="text-muted"><i class="fa fa-map-marker"></i> Location</small></p>
</div>
</div>
</li>
<li class="timeline-inverted">
<div class="tl-circ-empty"></div>
</li>
</ul>
</div>
Here is the CSS:
/** timeline box structure **/
.timeline {
list-style: none;
padding: 20px 0 20px;
position: relative;
}
.timeline:before {
top: 0;
bottom: 0;
position: absolute;
content: " ";
width: 2px;
background-color: #504f4f;
left: 5%;
}
.timeline li {
margin-bottom: 25px;
position: relative;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
.timeline li:after {
clear: both;
}
.timeline li:before, .timeline li:after {
content: " ";
display: table;
}
/** timeline panels **/
.timeline li .timeline-panel {
width: 90%;
float: left;
background: rgba(0,0,0,0.6);
padding: 10px;
position: relative;
top: 23px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.timeline li .timeline-panel.noarrow:before, .timeline li .timeline-panel.noarrow:after {
top:0;
right:0;
display: none;
border: 0;
}
.timeline li.timeline-inverted .timeline-panel {
float: right;
}
.timeline li.timeline-inverted .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
.timeline li.timeline-inverted .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
/** timeline circle icons **/
.timeline li .tl-circ {
position: absolute;
top: 23px;
left: 5%;
text-align: center;
background: url(../img/schedule-icon.png);
color: #fff;
width: 35px;
height: 35px;
margin-left: -13px;
z-index: 99999;
}
.timeline li .tl-circ-empty {
position: absolute;
top: 35px;
left: 46px;
text-align: center;
background: #434343;
width: 15px;
height: 15px;
margin-left: -13px;
border: 3px solid #434343;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
z-index: 99999;
}
/** timeline content **/
.tl-heading h4 {
margin: 0 0 10px 0;
color: #fafafa;
}
.tl-body p, .tl-body ul {
margin-bottom: 0;
color: #fafafa;
}
.tl-body > p + p {
margin-top: 5px;
}
/** media queries **/
#media (max-width: 991px) {
.timeline li .timeline-panel {
width: 90%;
}
}
#media (max-width: 700px) {
.page-header h1 { font-size: 1.8em; }
ul.timeline:before {
left: 40px;
}
ul.timeline li .timeline-panel {
width: calc(100% - 90px);
width: -moz-calc(100% - 90px);
width: -webkit-calc(100% - 90px);
}
ul.timeline li .tl-circ {
top: 22px;
left: 22px;
margin-left: 0;
}
ul.timeline > li > .timeline-panel {
float: right;
}
ul.timeline > li > .timeline-panel:before {
border-left-width: 0;
border-right-width: 15px;
left: -15px;
right: auto;
}
ul.timeline > li > .timeline-panel:after {
border-left-width: 0;
border-right-width: 14px;
left: -14px;
right: auto;
}
}
.schedule-header-text {
padding-top: 12px;
}
.schedule-header-text img {
max-width: 75%;
}
.content.page {
padding: 5%;
}
I don't know if I understood you correctly.
But here is what I did to make it align (I changed the color for visibility)
.timeline li .tl-circ-empty {
position: absolute;
top: 35px;
left: 5%;
text-align: center;
background: red;
width: 15px;
height: 15px;
margin-left: -7.5px;
border: 3px solid red;
border-radius: 50%;
z-index: 99999;
}
And I added the following
#media (max-width: 700px){
ul.timeline li .tl-circ-empty {
left: 22px;
margin-left: 10px;
}
}
I am in a rush to go somewhere. Tell me if this didn't solve your question.
EDIT1
PS.Like I mentioned above, I didn't have enough time to read through your css completely. I focused on the .tl-circ-emptyclass to create a fix without touching the whole css structure to minify the damage.
EDIT2
I remember dealing with making Vertical Timelines myself.
I learned a lot following this.
How this one can achieved in CSS. I googled out but i didn't find any solution.
Try this:
HTML
<nav class="nav">
<ul>
<li>1. Account Info</li>
<li>2. Verification</li>
<li>3. Enjoy</li>
</ul>
</nav>
StyleSheet
.nav ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
width: 100%;
}
.nav ul li {
float: left;
margin: 0 .2em 0 1em;
}
.nav ul a {
background: red;
padding: .3em 1em;
float: left;
text-decoration: none;
color: #fff;
position: relative;
}
.nav ul li:first-child a:before {
content: normal;
}
.nav ul li:last-child a:after {
content: normal;
}
.nav ul a:before {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-width: 1.5em 0 1.5em 1em;
border-style: solid;
border-color: red rgba(0, 0, 0, 0);
left: -1em;
margin-left: 1px;
}
.nav ul a:after {
content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid rgba(0, 0, 0, 0);
border-bottom: 1.5em solid rgba(0, 0, 0, 0);
border-left: 1em solid red;
right: -1em;
margin-right: 1px;
}
Here is the Demo
Try:
HTML:
<div class="arrow">
<p>1. Acount Info</p>
</div>
<div class="arrow2">
<p>2. Verification</p>
</div>
<div class="arrow3">
<p>3. Enjoy</p>
</div>
CSS:
.arrow {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display:inline-block;
}
.arrow:after {
content:'';
position: absolute;
top: 0px;
left: 201px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid red;
}
.arrow2 {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display: inline-block;
margin-left: 8px;
}
.arrow2:after {
content:'';
position: absolute;
top: 0px;
left: 201px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid red;
}
.arrow2:before {
content:'';
position: absolute;
top: 0px;
left: -1px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid white;
}
.arrow3 {
width: 200px;
height: 33px;
background-color: red;
border: 1px solid red;
position: relative;
display: inline-block;
margin-left: 8px;
}
.arrow3:before {
content:'';
position: absolute;
top: 0px;
left: -1px;
width: 0;
height: 0;
border: 17px solid transparent;
border-left: 12px solid white;
}
p {
color:white;
text-align: center;
margin-top: 6px;
}
And the DEMO
Here's my attempt: http://codepen.io/anon/pen/xDeCd/
This example works well even if the user changes his font-size or triggers a page zoom. List-items should not break in several lines if the browser is resized.
Screenshot
Markup
<ol>
<li>1. Account info</li>
<li>2. Verification</li>
<li>3. Enjoy</li>
</ol>
(add links if/where necessary, I've just supposed they are not links but simply information labels about the required steps during a process).
Relevant CSS
ol {
white-space: nowrap;
}
li:after, li:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
top: 0;
width: 1em;
height: 100%;
}
li {
display: inline-block;
position: relative;
height: 3em;
padding: 0 1em;
margin-right: 3em;
background: #d12420;
color: #f0f0f0;
font: 1em/3em Arial;
}
li + li { margin-left: -1.8em; }
li:not(:last-child):after {
left: 100%;
content: "";
border-left: 1em solid #d12420;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
}
li + li:before {
content: "";
right: 100%;
border-left: 1em solid #transparent;
border-top: 1.5em solid #d12420;
border-bottom: 1.5em solid #d12420;
}
li:nth-child(1) { z-index: 3; }
li:nth-child(2) { z-index: 2; }
li:nth-child(3) { z-index: 1; }
Here is some code, it may be useful for youDEMO
<div class="breadcrumb flat">
<a class="active" href="#">1.Account Verification</a>
2.Verification
3.Enjoy
</div>