• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 65
  • Last Modified:

responsive tracker cuts off words on smaller screens

Trying to create a 5-stage tracker, The IPad is the smallest screen this has to work on.
To create the chevrons, I used a rectangle and a diamond.  But the diamond covers the text on the rectangle when in iPad size.
I used z-index to give each step its own layer trying to pull the rectangles above the diamonds.
Here is the fiddle:

If you know of a better way to create this tracker, please share.  this is like the 30th version.  :(

Image of my tracker
0
Jim Schwetz
Asked:
Jim Schwetz
  • 2
1 Solution
 
Eoin OSullivanConsultantCommented:
Jim
There are a few ways to do this
1. With images .. create a PNG with each step in the chevron coloured e.g.  In the one image create a version with 1 stage coloured, then 2m then 3 etc.  This is called an image sprite and is commonly used for icons in HTML/CSS
You then use CSS to set the area of the sprite which is visible to correspond to the step you want
There is a very detailed working example here and all code provided
https://codyhouse.co/demo/breadcrumbs-multi-steps-indicator/index.html

2. You can do it completely in CSS & HTML
<ol class="steps">
    <li class="step1 current"><span>Step1</span></li>
    <li class="step2"><span>Step2</span></li>
    <li class="step2"><span>Step3</span></li>
    <li class="step2"><span>Step4</span></li>
    <li class="step2"><span>Step5</span></li>
</ol>
ol.steps {
    $line_height: 20px;
    $padding: 9px;
    $arrow_size: ($line_height + 2 * $padding)/2;
    $max_li: 10;
    
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;
    font-size: 13px;
    line-height: $line_height;
    font-weight: bold;
    counter-reset: li;
    
    li {
        list-style-image: none;
        list-style-type: none;
        margin-left: 0;
        text-align: center;
        color: #3a3a3a;
        background: #dae4eb;
        position: relative;
        margin-left: 5px + 2 * $arrow_size;
        
        // Appended arrow.
        &:after {
            position: absolute;
            top: 50%;
            left: 100%;
            content: " ";
            height: 0;
            width: 0;
            pointer-events: none;
            border: solid transparent;
            border-left-color: #dae4eb;
            border-width: $arrow_size;
            margin-top: -$arrow_size;
        }

        span {
            display: block;
            padding: $padding ($padding + $arrow_size) $padding $padding;

            // Prepended arrow inset.
            &:after {
                position: absolute;
                top: 50%;
                right: 100%;
                content: " ";
                height: 0;
                width: 0;
                pointer-events: none;
                border: solid #dae4eb;
                border-left-color: transparent;
                border-width: $arrow_size;
                margin-top: -$arrow_size;
            }
        }
    }

    & > li {
        float: left;
    }
    
    li.current {
        color: #fff;
        background: lightgreen;

        // Appended arrow.
        &:after {
          border-left-color: lightgreen;
        }
                
        span {
            // Prepended arrow.
            &:after {
                border-color: lightgreen;
                border-left-color: transparent;
            }
        }
    }

    // For the overlapping to work, later LIs must have a lower z-index.
    @for $i from 1 through $max_li {
        li.step#{$i} {
            z-index: $max_li - $i;
        }
    }
}

Open in new window

1
 
Jim SchwetzWeb SpecialistAuthor Commented:
Thank you!  This was done way better than what I was trying to do.  Time to adjust some of my code.  Thanks Eoin.
0
 
Eoin OSullivanConsultantCommented:
No bother ...
As the saying goes "Where there's a will ........ there's  ... a dead person" ;-)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now