Css styling steps

Question

I'm using Jquery steps with bootstrap. I've created custom css to style steps list.

My css is

.steps li {
    padding: 7px 4px 10px;
    margin-right: 5px;
    background: #dedede;
    position: relative;
    display: inline-block;
}
.steps li:before {
    width: 0;
    height: 0;
    border-top: 17px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content: "";
    top: 0;
    left: 0;
}
.steps li:after {
    width: 0;
    height: 0;
    border-top: 18px inset transparent;
    border-bottom: 17px inset transparent;
    border-left: 20px solid #dedede;
    position: absolute;
    content: "";
    top: 0;
    right: -20px;
    z-index: 2;
}
.steps .badge {
    margin: 0 2px 0 19px;
    position: relative;
    top: -1px;
}

and, my part of steps list,

1)

<p>Correct</p>
<div class="steps">
<ul>
    <li role="tab" class="disabled" aria-disabled="true">
    <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
        <span class="badge">3</span> Review Contributors
    </a>
    </li>
</ul>
</div>

2)

<p>Wrong</p>
<div class="steps">
<ul>
    <li role="tab" class="disabled" aria-disabled="true">
        <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
            <span class="badge">3</span> Review<br/> Contributors
            </a>
    </li>
</ul>
</div>

Here, the first one works fine. But the second one breaks the styling due to the <br/> in Review<br/> Contributors. Please see my Fiddle. What I'm trying to do is, if the text length is too long, I want to break the text with the same styling. How to do that? I've tried with display:table properties. But it doesn't work.

I've used <br/> to reduce the size. But I need the result as same as 1). Do I need to use any other instead of <br/>

can you expand on "breaks the styling" ? by telling us what part of the styling is it that breaks? — Taryn East, Aug 20 '14 at 05:40
Can you see my fiddle please. It breaks the style i've used for `li` — Linga, Aug 20 '14 at 05:40
1) I did... 2) it doesn't tell me what is the problem. yes... a break makes it look awful... so don't put a break there. 3) fiddles don't last forever, but Stack Overflow questions do... you should put all relevant information into your question on Stack Overflow — Taryn East, Aug 20 '14 at 05:41
I have to use several `li`. So, to align on the same line I need to use it — Linga, Aug 20 '14 at 05:43
I mean, I should use `
`. But I need the result as same as 1) — Linga, Aug 20 '14 at 05:44
1 question. The number of li elements is known or variable? Do you have a max per row? — Devin, Aug 20 '14 at 05:47
In this case you also have to set the he borders dynamicallly that matches the height of the li's otherwise you li height increases and arrow and tail becomes the same that is bad effect — Mehar, Aug 20 '14 at 05:59
for example if we increase the height of li then li before and after remains same they both have relative height — Mehar, Aug 20 '14 at 06:03
get the height of li in jquery and increase or decrease the border according to that height — Mehar, Aug 20 '14 at 06:11

score 2 · Answer 1 · answered Aug 20 '14 at 06:01

try this, see fiddle

<p>Correct</p>
<div class="steps">
    <ul>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
            <span class="badge">3</span> Review Contributors
        </a>

        </li>
    </ul>
</div>
<p>Wrong</p>
<div class="steps">
    <ul>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
        <li role="tab" class="disabled" aria-disabled="true"> <a aria-controls="wizard-p-2" href="#wizard-h-2" id="wizard-t-2">
                <span class="badge">3</span> Review Contributors
                </a>

        </li>
    </ul>
</div>

and CSS

.steps li {
    margin-right: 2px;
    background: #dedede;
    position: relative;
    display: inline-block;
    width:11.5%;
    font-size:12px;
    padding:20px 0 10px 10px;
    text-align:center;
}
.steps li:before {
    width: 0;
    height: 0;
    border-top: 41px inset transparent;
    border-bottom: 40px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content:"";
    top: 0;
    left: 0;
}
.steps li:after {
    width: 0;
    height: 0;
    border-top: 41px inset transparent;
    border-bottom: 40px inset transparent;
    border-left: 20px solid #dedede;
    position: absolute;
    content:"";
    top: 0;
    right: -20px;
    z-index: 2;
}
.steps .badge {
    margin: 0 2px 0 19px;
    position: relative;
    top: -3px;
}

it's the exact solution to your described problem, if you want something else you'd explain things better, or add some styling of your own, I can't read minds. But thank you for teh downvote, you reminded me why I avoided this site — Devin, Aug 20 '14 at 06:10

score 0 · Answer 2 · answered Sep 06 '19 at 11:27

    .steps a {
        font-weight: bolder;
    }

    .wizard > .content > .body ul > li {
        display: table;
    }


    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
        color: white;
        cursor: default;
        background-color: #f60000;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }

    .nav-tabs > li > a:hover {
        border-color: #eee #eee #ddd;
    }

    .nav > li > a:focus, .nav > li > a:hover {
        text-decoration: none;
        background-color: #eee;
    }

    .nav-tabs > li > a {
        margin-right: 2px;
        line-height: 1.42857143;
        border: 1px solid transparent;
        border-radius: 4px 4px 0 0;
    }

    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
    }

    .customerrow:hover {
        background-color: steelblue;
        color: white;
    }

    .modal {
        background-color: #5665928f;
    }

    .modal-dialog {
        max-width: 800px;
    }

    .list-group-item {
        display: inline;
        border: 0px
    }

    body {
        font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
    }

    button, input, select, textarea {
        font-family: inherit;
        font-size: inherit;
        line-height: inherit;
    }
    /* jquery validation */
    label.error {
        color: #e7505a;
        margin-left: 10px;
        padding: 7px;
    }

    input.error {
        border: 2px solid #e7505a;
    }


    .steps li {
        margin-right: 2px;
        background: #2184be;
        position: relative;
        display: inline-block;
        width: 11.5%;
        font-size: 12px;
        padding: 20px 0 10px 10px;
        text-align: center;
    }

    li.done {
        background: #718781;
        margin-right: 2px;
        position: relative;
        display: inline-block;
        width: 11.5%;
        font-size: 12px;
        padding: 20px 0 10px 10px;
        text-align: center;
    }

        .steps li:before {
            width: 0;
            height: 0;
            border-top: 41px inset transparent;
            border-bottom: 40px inset transparent;
            border-left: 20px solid #fff;
            position: absolute;
            content: "";
            top: 0;
            left: 0;
        }

    .wizard > .steps .done a {
        background: #718781;
        color: #fff;
    }

        .wizard > .steps .done a:hover {
            background: #718781;
            color: #fff;
        }
    .steps li:after {
        width: 0;
        height: 0;
        border-top: 41px inset transparent;
        border-bottom: 40px inset transparent;
        border-left: 20px solid #2184be;
        position: absolute;
        content: "";
        top: 0;
        right: -20px;
        z-index: 2;
    }

    .wizard > .steps .disabled a {
        background: #2184be;
        color: black;
        cursor: default;
    }
        .steps .badge {
        margin: 0 2px 0 19px;
        position: relative;
        top: -3px;
    }

   .wizard ul > li{
       padding:12px;
   }

    .wizard > .steps .disabled a:hover {
        background: #2184be;
        color: black;
        cursor: default;
    }

Css styling steps

2 Answers2