intro.js - reposition progress bar and put on bottom (beneath steps)

Question

Is there a more clean approach? How do I position the progress bar to be on the very bottom of the introjs-tooltip? Here is my CSS, and what I desire should look like this.

.introjs-progress {
    width: 112%;
    opacity: 1;
    margin: 0;
    bottom: -65px;
    position: relative;
    left: -25px;
}

Right now, my progress bar is stock layout, it's under the steps intro text and above the steps buttons. This is what it looks like: notice the bar is above steps

Wishing you good health, wealth and wisdom in 2017 - happy new year from me to you! GLHF

please refer to both pics attached to this stack - i'm using introjs progress bar code from docs -- http://introjs.com/docs/getting-started/examples — Uncle Iroh, Jan 13 '17 at 19:35
You should really include more code or actual live examples next time if you want to be helped. Screenshots are rarely enough. — Serg Chernata, Jan 13 '17 at 19:41
I will take your advice and listen for all future posts. I'll come back to upvote once I have enough reputation. — Uncle Iroh, Jan 14 '17 at 14:27

score 0 · Accepted Answer · answered Jan 13 '17 at 19:40

Use absolute positioning on progress element and add a little extra bottom padding to it's parent tooltip for aesthetics.

.introjs-tooltip {
    padding: 10px 10px 14px 10px;
}

.introjs-tooltipbuttons, .introjs-tooltiptext {
    text-align: center;
}

.introjs-progress {
    overflow: hidden;
    position: absolute;
    height: 5px;
    bottom: 0;
    left: 0;
    width: 100%;
    /* margin: 10px 0 5px 0; */
    /* border-radius: 4px; */
    background-color: #ecf0f1;
}

intro.js - reposition progress bar and put on bottom (beneath steps)

1 Answers1