8

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"
        }
    });
});

Screenshot

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

Brian
  • 622
  • 10
  • 29

4 Answers4

14

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.

Rob W
  • 341,306
  • 83
  • 791
  • 678
  • wow...I am astounded. I have never run into whitespace as an issue. thanks! – Brian Oct 11 '11 at 21:07
  • The JQuery UI stylesheet defines `margin-right:-0.3em` for the `.ui-buttonset .ui-button` selector (at `jquery-ui.css`). The negative causes the button to "eat" some of the the left margin. – Rob W Oct 11 '11 at 21:10
  • also note the source on jqueryui's demo page. includes white space [http://jqueryui.com/demos/button/#radio](http://jqueryui.com/demos/button/#radio) – Brian Oct 11 '11 at 21:11
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.

Alastair
  • 6,837
  • 4
  • 35
  • 29
  • This forces PHP to process (enter in "php mode") on each line break. Works, but you'll lost some cpu microcicles. – Arvy Oct 01 '15 at 17:16
1

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;
}
Community
  • 1
  • 1
CallMeLaNN
  • 8,328
  • 7
  • 59
  • 74
  • Man, that's a bit overkill for some white-space: Making every client process that and modify the DOM instead of just sending them the right mark-up. Are you not using any server-side languages? I mean, it's only ~250b of code but...just fix it on your end because there's a good chance you're targetting mobile users, not desktops which can handle JS more quickly. – Alastair Dec 16 '12 at 15:06
  • I agreed but I create my quick solution just for desktop user on that time. It is up to you to find out the best way for mobile. This is not about server side language, it is white-space that can be removed from server or client side. You can't simply achieve the nice PHP ` ?>` like your answer in ASP.NET. That time I just want my code readable. If you want to really minimize client side processing for mobile, you can use standard html radio and let the mobile browser to render it or design native app ;-) that is because jquery-ui it-self uses client side resource only for custom ui. – CallMeLaNN Dec 16 '12 at 19:04
  • Interesting, @callmelann ! I've had no experience with, just skim-read example code I've stumbled upon sometimes. Now I understand why you did it this way. I was close to ```echo```ing the code in PHP because it's such a nightmare to look at (and work with) in the IDE. Not that this is a critical issue but I had a quick look and it there are some ASP.NET(#?!) core modules which apparently strip white-space (at a server level, not script/class, if I understand rightly) before serving the pages. It'd fix this issue for developers using MS kit and likely save considerable bandwidth globally. – Alastair Dec 17 '12 at 15:25
0

To automatically remove whitespace for all uses of the buttonset widget, one could overwrite and extend the jquery ui buttonset widget constructor using the code below

var original_create = $.ui.buttonset.prototype._create;
$.ui.buttonset.prototype._create = function() {
    this.element.contents().filter(function() {
        return this.nodeType == 3;
    }).remove();
    original_create.call(this);
}
user1734726
  • 43
  • 3