Hi,
I am using the latest ui 1.8.16. I think what you mean is about spacing between the buttons right? The 2px might come from 1px for each button side. I am not sure the reported issue but I have spacing problem that might related to this issue and the ticket issue here:
http://bugs.jqueryui.com/ticket/6159I notice sometimes there is a small spacing between buttons, it stick together by 1px+1px or 1px only. It is inconsistent for each button position and accross browsers.
I can remove this spaces by removing the textnode which is come from when writing the html code. You probably write like this:
- <div id="choose">
<input id="r1" type="radio" name="f1" value="r1" /><label for="r1">r1</label>
<input id="r2" type="radio" name="f1" value="r2" /><label for="r2">r2</label>
</div>
Note the
line break and
tab/space between first label with the second input:radio. This problem is mention in here
http://stackoverflow.com/questions/7732447/gap-between-buttons-on-jqueryui-buttonsetTo remove the textnode I use the idea from here
http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery since I ddn't find a jquery way to remove it.
Solution:
So when you open the link given:
http://jsbin.com/eweno3
and run this in the console it will fixed it:
$('.ui-buttonset').contents().filter(function () { return this.nodeType == 3; }).remove();
or simply I remove it when I create the buttonset:
$(function() {
$('div#choose').buttonset()
.contents().filter(function () { return this.nodeType == 3; }).remove();
});
Then I override the .ui-buttonset .ui-button CSS class to have margin right -1px to see only 1px border in between or margin right 0 to see 1px+1px if I want to show border on both sides.
.ui-buttonset .ui-button {
margin-left: 0;
margin-right: -1px;
}
If this is related please reopen the ticket or if this is also an issue consider to open new as I have a problem to access the jquery ui Trac.
This is applied to
input:combobox also.
CallMeLaNN