Question

I’m using jQuery UI’s buttonset() to create a naviagation/tab bar inside tags.

<section id="menu-container" class="container">
    <nav id="group-menu" class="menu" data-bind="template: &#39;menuGroupTemplate&#39;">
        <div id="menu1">
            <input type="radio" id="radio1" name="radio" /><label for="radio1">Summary</label>
            <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Category 1</label>
            <input type="radio" id="radio3" name="radio" /><label for="radio3">Category 2</label>                    
        </div>
    </nav>
</section>

The issue I’m having is that I need to have the nav bar stretch across the entire nav section that it is contained in.

The navigation data is potentially dynamic, so static padding won’t be sufficient.

I attempted a function that padded out elements proportionally, but as I wrote it I noticed that width() and outerWidth() didn’t seem to be reporting the same widths as I was seeing in my browser (chrome), and so I couldn’t get the padding anywhere near correct!

function layoutMenuBar() {
    var childNodes = parent.children().find('span');
    var childCount = childNodes.length;

    var sumWidth = 0;
    childNodes.each(function() {
        sumWidth = sumWidth + parseInt($(this).outerWidth());
    });

    var parentWidth = parseInt(parent.outerWidth());
    var padding = parentWidth - sumWidth;

    if (padding > 0) {
        var newSumWidth = 0;

        childNodes.each(function() {
            var elemWidth = parseInt($(this).outerWidth());
            var elemPad = parseInt(elemWidth / sumWidth * padding / 2);

            $(this).css('padding-left', elemPad);
            $(this).css('padding-right', elemPad);
        });
    }
}

Can anyone suggest a better way of doing this, or explain what would be going wrong with my code?

Answer 1

Have you tried playing with the display attribute, in particular with regards to tables.

You can layout each checkbox equally (in width) into the width you specify for the nav element:

nav {
    width: 100%;
    display: table;
}

#menu1 {
    display: table-row;
}

#menu1 > label {
    display: table-cell;
}

See this in action: http://jsfiddle.net/william/FZC4q/3/.