Horizonal Nav - If width is not specified for <li>, last item may be hidden

[ajw625]

I would like to have a horizontal navigation bar where the width of each list item is automatic based on the text label. This mostly works. With the code below, it's fine with 4 items, but with 5 or more the last one seems to wrap below and get hidden.

Here's my (simplified) code:

HTML

        <div id="basic" class="frame">
            <ul class="clearfix">
                <li id="form01">Form Number 1</li>
                <li id="form02">Form Number 2</li>
                <li id="form03">Form Number 3</li>
                <li id="form04">Form Number 4</li>
                <li id="form05">Form Number 5</li>
            </ul>
        </div>

CSS

body { background: #e8e8e8; }
.container { margin: 0 auto; }

/* Example wrapper */
.wrap {
    position: relative;
    margin: 3em 0;
}

/* Frame */
.frame {
    height: 30px;
    line-height: 30px;
    overflow: hidden;
}
.frame ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    font-size: 20px;
}
.frame ul li {
    float: left;
/*      width: 227px; */
    height: 100%;
    margin: 0 4px 0 0;
    padding: 0 4px;
    background: #333;
    color: #ddd;
    text-align: center;
    cursor: pointer;
}
.frame ul li.active {
    color: #fff;
    background: #a03232;
}

JavaScript

var $jq1_11_1 = jQuery.noConflict(true);

$jq1_11_1(function($){
    'use strict';

    (function () {
        var $frame  = $('#basic');

        // Call Sly on frame
        $frame.sly({
            horizontal: 1,
            itemNav: 'centered',
            smart: 1,
            activateOn: 'click',
            mouseDragging: 1,
            touchDragging: 1,
            releaseSwing: 1,
            startAt: 3,
            scrollBy: 1,
            activatePageOn: 'click',
            speed: 300,
            elasticBounds: 1,
            easing: 'easeOutExpo',
            dragHandle: 1,
            dynamicHandle: 1,
            clickBar: 1
        });

    }());

});

[darsain]

Thank you! This finally replicated the issue reported in #150 and several threads on Sly.js google group. Apparently none reporting the issue could be arsed to isolate it so I could actually fix it :confused:

The fix already works on my localhost. I'll do a few more tests and release it later today.

[darsain]

You can test the src/sly.js and report :smile:

[ajw625]

Thanks! It's working correctly now.

[darsain]

Be sure to use the latest 1.4.1 released just now. It has fixes for stuff broken in 1.4.0 :)

[ghost]

Here's weird thing... I had exactly the same issue but ONLY when my HTML font-size was set lower than 62.5% Any idea why? :o)