html5 - How can I resolve bootstrap CSS issue? -
this actual output 
how remove highlighted section in red, in actual output?
this expected output
example,
.wizard ul { list-style: none outside none; padding: 0; margin: 0; width: 4000px; } .wizard ul li { float: left; margin: 0; padding: 0 20px 0 30px; line-height: 35px; position: relative; background: #f5f5f5; color: #d0d0d0; font-size: 12px; cursor: default; -webkit-transition: .218s ease; -moz-transition: .218s ease; -o-transition: .218s ease; transition: .218s ease; } .wizard ul li .chevron { border: 24px solid transparent; border-left: 14px solid #d4d4d4; border-right: 0; border-width: 18px 0 17px 14px; display: block; position: absolute; right: -14px; top: 0; z-index: 1; } .wizard ul li .chevron:before { border: 24px solid transparent; border-left: 14px solid #f5f5f5; border-right: 0; content: ""; display: block; position: absolute; right: 1px; top: -24px; -webkit-transition: .218s ease; -moz-transition: .218s ease; -o-transition: .218s ease; transition: .218s ease; } .wizard ul li.complete { background: #f5f5f5; color: #444; } .wizard ul li.complete:before { display: block; content: ""; position: absolute; bottom: 0; left: 0; right: -1px; height: 2px; max-height: 2px; overflow: hidden; z-index: 10000; } .wizard ul li.complete:hover { background: #eee; cursor: pointer; } .wizard ul li.complete:hover .chevron:before { border-left: 20px solid #eee; } .wizard ul li.complete .chevron:before { border-left: 20px solid #f5f5f5; } .wizard ul li.active { background: #428bca; color: #262626; } .wizard ul li.active:before { display: block; content: ""; position: absolute; bottom: 0; left: 0; right: -1px; height: 2px; max-height: 2px; overflow: hidden; z-index: 10000; } .wizard ul li.active .chevron:before { border-left: 14px solid #428bca; } .wizard ul li .badge { margin-right: 8px; } .wizard ul li:first-child { -webkit-border-radius: 2px 0 0 0; -webkit-background-clip: padding-box; -moz-border-radius: 2px 0 0 0; -moz-background-clip: padding; border-radius: 2px 0 0 0; background-clip: padding-box; padding-left: 20px; } /**/ </style> <div data-target="#simplewizardinwidget-steps" class="wizard" id="simplewizardinwidget"> <ul class="steps"> <li class="complete" data-target="#simplewizardinwidgetstep1">personal information<span class="chevron"></span></li> <li data-target="#simplewizardinwidgetstep2" class="complete">qualification<span class="chevron"></span></li> <li data-target="#simplewizardinwidgetstep3" class="active">profile<span class="chevron"></span></li> <li data-target="#simplewizardinwidgetstep2" class="complete">qualification1<span class="chevron"></span></li> <li data-target="#simplewizardinwidgetstep2" class="complete">qualification2<span class="chevron"></span></li> </ul> </div> kindly assist me achieve this..
html part
add overflow: hidden; .wizard ul
.wizard ul { overflow: hidden; list-style: none outside none; padding: 0; margin: 0; width: 4000px; } .wizard ul li { float: left; margin: 0; padding: 0 20px 0 30px; line-height: 35px; position: relative; background: #f5f5f5; color: #d0d0d0; font-size: 12px; cursor: default; -webkit-transition: .218s ease; -moz-transition: .218s ease; -o-transition: .218s ease; transition: .218s ease; } .wizard ul li .chevron { border: 24px solid transparent; border-left: 14px solid #d4d4d4; border-right: 0; border-width: 18px 0 17px 14px; display: block; position: absolute; right: -14px; top: 0; z-index: 1; } .wizard ul li .chevron:before { border: 24px solid transparent; border-left: 14px solid #f5f5f5; border-right: 0; content: ""; display: block; position: absolute; right: 1px; top: -24px; -webkit-transition: .218s ease; -moz-transition: .218s ease; -o-transition: .218s ease; transition: .218s ease; } .wizard ul li.complete { background: #f5f5f5; color: #444; } .wizard ul li.complete:before { display: block; content: ""; position: absolute; bottom: 0; left: 0; right: -1px; height: 2px; max-height: 2px; overflow: hidden; z-index: 10000; } .wizard ul li.complete:hover { background: #eee; cursor: pointer; } .wizard ul li.complete:hover .chevron:before { border-left: 20px solid #eee; } .wizard ul li.complete .chevron:before { border-left: 20px solid #f5f5f5; } .wizard ul li.active { background: #428bca; color: #262626; } .wizard ul li.active:before { display: block; content: ""; position: absolute; bottom: 0; left: 0; right: -1px; height: 2px; max-height: 2px; overflow: hidden; z-index: 10000; } .wizard ul li.active .chevron:before { border-left: 14px solid #428bca; } .wizard ul li .badge { margin-right: 8px; } .wizard ul li:first-child { -webkit-border-radius: 2px 0 0 0; -webkit-background-clip: padding-box; -moz-border-radius: 2px 0 0 0; -moz-background-clip: padding; border-radius: 2px 0 0 0; background-clip: padding-box; padding-left: 20px; } <br/> <br/> <div data-target="#simplewizardinwidget-steps" class="wizard" id="simplewizardinwidget"> <ul class="steps"> <li class="complete" data-target="#simplewizardinwidgetstep1">personal information<span class="chevron"></span></li> <li data-target="#simplewizardinwidgetstep2" class="complete">qualification<span class="chevron"></span></li> <li data-target="#simplewizardinwidgetstep3" class="active">profile<span class="chevron"></span></li> <li data-target="#simplewizardinwidgetstep2" class="complete">qualification1<span class="chevron"></span></li> <li data-target="#simplewizardinwidgetstep2" class="complete">qualification2<span class="chevron"></span></li> </ul> </div>
Comments
Post a Comment