gap between buttons on jqueryui buttonset()

Question

I am running into an interesting phenomenon where my buttonset() has gaps between all of the buttons. Obviously I would like them to butt up like in the jquery demo.

My code is fairly stock

HTML

<div style="float:right;" id="filter-button-bar">
    <input type="radio" id="it_button" name="radio" class="filter-button" /><label for="it_button">Information</label>
     <input type="radio" id="rev_button" name="radio" class="filter-button" /><label for="rev_button">Revenue</label>
    <input type="radio" id="ent_button" name="radio" class="filter-button" /><label for="ent_button">Entertainment</label>
    <input type="radio" id="sec_button" name="radio" class="filter-button" /><label for="sec_button">Security</label>
    <input type="radio" id="asst_button" name="radio" class="filter-button" /><label for="asst_button">Assistants</label>
    <input type="radio" id="all_button" name="radio"  class="filter-button" checked="checked"/><label for="all_button">All</label>
</div>

JS

$(function() {
    $( "#filter-button-bar" ).buttonset();
    $( ".filter-button" ).button({
        icons: {
            primary: "ui-icon-search"
        }
    });
});

Annoyingly enough, when put into jsfiddle, all looks great. jsfiddle

Answer 1

Remove the whitespace between these buttons. This will fix your issue:

<input type="radio" id="it_button" name="radio" class="filter-button" /><label for="it_button">Information</label><input type="radio" id="rev_button" name="radio" class="filter-button" /><label for="rev_button">Revenue</label><input type="radio" id="ent_button" name="radio" class="filter-button" /><label for="ent_button">Entertainment</label><input type="radio" id="sec_b Et cetera

Whitespace in the HTML source is usually ignored at HTML, except for a few cases:

• CSS: white-space: pre,pre-wrap,.. (and the <pre> tag)
• Between inline elements.

Your code seems not very readable after this update. You can safely add newlines within HTML tags, if you don't want to place your whole code at one line.

Answer 2

To get around this silly white-space issue, I used PHP to break my lines:

<input type='radio'><?
?><input type='radio'><?
?><input type='radio'>

It's a hideous workaround but beats unusably-long lines.

Answer 3

I am looking how to remove this whitespace using jquery I got the idea from here to remove the textnode element:

$('.ui-buttonset').contents().filter(function () { return this.nodeType == 3; }).remove();

It can be done in the document load, in your case I can write like this:

$(function() {
    $(".filter-button").button({
        icons: {
            primary: "ui-icon-search"
        }
    })
    .parent().buttonset()
    .contents().filter(function () { return this.nodeType == 3; }).remove();
});

I test it in all w3c browsers + IE8 and it work fine. So my code readable.

I use the latest jquery ui 1.8.16

Update

Probably we need to make the right margin to 0 (1px+1px border in between) or -1px (1px border in between) to make it stick together.

.ui-buttonset .ui-button {
    margin-left: 0;
    margin-right: -1px;
}