How can I resolve bootstrap CSS issue?

Question

This is the actual output enter image description here

How to remove the highlighted section in red, in the actual output?

This is my expected output

enter image description here

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: all .218s ease;
        -moz-transition: all .218s ease;
        -o-transition: all .218s ease;
        transition: all .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: all .218s ease;
                -moz-transition: all .218s ease;
                -o-transition: all .218s ease;
                transition: all .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 to achieve this..

Html Part

NewsletterPoll · Accepted Answer · 2015-06-25 16:33:25Z

add overflow: hidden; to .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: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .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: all .218s ease;
                    -moz-transition: all .218s ease;
                    -o-transition: all .218s ease;
                    transition: all .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>

Thanks you...i was trying to fix the issue more 2 to 3 hours...you save my time

Collectives™ on Stack Overflow

How can I resolve bootstrap CSS issue?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related