Wizard horizontal line Issue

HTML & CSS
1

I am making a round circle wizard steps which is working fine to me, but having problem to set horizontal line between the circle, it is not coming properly in between the wizard steps and also overlapping on wizard steps.

HTML:

<div class="stepwizard">
										<div class="stepwizard-row">
											<div class="stepwizard-step">
												<a class="btn btn-default btn-circle active-step" href="#step-1" data-toggle="tab" onclick="stepnext(1)" >1</a>
												<p>Title</p>
											</div>
											<div class="stepwizard-step">
												<a class="btn btn-default btn-circle" disabled="disabled" href="#step-2" data-toggle="tab">2</a>
												<p>tag</p>
											</div>
											<div class="stepwizard-step">
												<a class="btn btn-default btn-circle" disabled="disabled" href="#step-3" data-toggle="tab">3</a>
												<p>Description</p>
											</div> 
											<div class="stepwizard-step">
												<a class="btn btn-default btn-circle" disabled="disabled" href="#step-4" data-toggle="tab">4</a>
												<p>Preview</p>
											</div> 
											
										</div>
										<div class="rate-updates">
											<div class="tab-content margintop0" style="border:none !important;">
												<div class="tab-pane fade active in pa20 steps" id="step-1" >
													<div class="row">
														<div>	1- Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title 
															Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </div>
														<div><button class="btn btn-success" onclick="stepnext(2);" type="button"><i class="icon-next"></i> Next</button></div>
													</div>
												
													
												</div>
												
												<div class="tab-pane fade pa20 steps" id="step-2">
													<div class="row">  
														<div> 2- Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title 
															Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </div>
														<div>
															<button class="btn btn-success" onclick="stepnext(1);" type="button"><i class="icon-next"></i> Previous</button>
															<button class="btn btn-success" onclick="stepnext(3);" type="button"><i class="icon-next"></i> Next</button>
														</div>
													</div>
												</div>
												
												<div class="tab-pane fade pa20 steps" id="step-3" >
													<div class="row"> 
														<div> 3- Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title 
															Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </div> 
														<div class="text-center">
															<button class="btn btn-success" onclick="stepnext(2);" type="button"><i class="icon-next"></i> Previous</button>
															<button class="btn btn-success" onclick="stepnext(4);" type="button"><i class="icon-next"></i> Next</button>
														</div>
													
													</div>
														
												</div>
												
												<div class="tab-pane fade pa20 steps" id="step-4" >
													<div class="row"> Preview 
														<div> 3- Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title 
															Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title Title </div> 
														<div>	
															<button class="btn  btn-success" onclick="stepnext(3);" type="button"><i class="icon-next"></i> Previous</button>
															<button class="btn  btn-success" onclick="stepnext(0);" type="button"><i class="icon-next"></i> Edit</button>
															<button class="btn  btn-success" onclick="stepnext(0);" type="button"><i class="icon-next"></i> Publish</button>
														</div>
													</div>
														
												</div>
											</div>
										</div>
									</div>

CSS:

.stepwizard-step p {
    margin-top: 10px;    
}
.stepwizard {      
    width: 100%;
    position: relative;
}
.stepwizard-row {
    
}



.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}



.stepwizard-step{    
    float:left;
    text-align: center;
    position: relative;
	width:25%;
}

.stepwizard-step:before {
    top: 25%;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 50%;
    height: 2px;
    background-color: #21a2d1;
    z-order: -1;
	right: 0%;
	content: '';
}

.stepwizard-step:first-child:before {
    left: 58%;
    max-width: 100%;
	width: 100%;
}

.stepwizard-step:last-child:before {
    max-width: 50%;
    width: 50%;
	right:8%;
}


.btn-circle {
  width: 50px;
  height: 50px;
  text-align: center;
  padding: 16px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 30px;
}

please see attached image which I am getting the result from above CSS code.

1301×242 4.2 KB

2

Is the line supposed to be visible under the circle? If not the easiest way would be just to use one pseudo element and draw the whole line in one go and colour the circle background so it hides the line as it passes underneath.

We had a similar question a while ago in the forum which was more complex than yours but this was the result.

You may need to do a drawing of the final result because I’m guessing you don’t want the last blue line to carry on after the circle either.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.stepwizard-step p {
	margin-top: 10px;
}
.stepwizard {
	width: 100%;
	position: relative;
}
.stepwizard-row {
}
.stepwizard-step button[disabled] {
	opacity: 1 !important;
	filter: alpha(opacity=100) !important;
}
.stepwizard-step {
	float:left;
	text-align: center;
	position: relative;
	width:25%;
}
.stepwizard-step:before {
	top: 25%;
	bottom: 0;
	margin:2px;
	position: absolute;
	content:"";
	width: 100%;
	height: 2px;
	background-color: #21a2d1;
	z-index: -1;
	left:50%;
	content: '';
}
.stepwizard-step:last-child:before {
	display:none;
}
.btn-circle {
	width: 50px;
	height: 50px;
	line-height:50px;
	text-align: center;
	display:inline-block;
	font-size: 12px;
	border-radius: 30px;
	border:1px solid #000;
	position: relative;
	z-index:2;
	background:#fff;
}
</style>
</head>

<body>
<div class="stepwizard">
  <div class="stepwizard-row">
    <div class="stepwizard-step"> <a class="btn btn-default btn-circle active-step" href="#step-1" data-toggle="tab" onclick="stepnext(1)" >1</a>
      <p>Title</p>
    </div>
    <div class="stepwizard-step"> <a class="btn btn-default btn-circle" disabled="disabled" href="#step-2" data-toggle="tab">2</a>
      <p>tag</p>
    </div>
    <div class="stepwizard-step"> <a class="btn btn-default btn-circle" disabled="disabled" href="#step-3" data-toggle="tab">3</a>
      <p>Description</p>
    </div>
    <div class="stepwizard-step"> <a class="btn btn-default btn-circle" disabled="disabled" href="#step-4" data-toggle="tab">4</a>
      <p>Preview</p>
    </div>
  </div>
</div>
</body>
</html>

1374×124 11.1 KB

3

thanks Paul, it works for me…

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.