jQuery Forum

Boing!

Please share a link to a live sample page showing the problem. If you don't have a way to host one, you can use http://jsbin.com/

Here's an example of the problem:

http://jsbin.com/eweno3

You notice the extra space between some of the buttons.  If you look at the default jQuery UI demo for button, you can reproduce the problem there as well by adding a couple more repeat buttons.  I.e., take the radio/label elements with id repeat1 and duplicate a few times fixing the numbering to maintain uniqueness.

Some of the borders are perfect, while others are several pixels thick.  Others are not even touching.

--adam

Which browsers are you seeing problems in? Here's a screenshot of what I'm seeing (from top to bottom: Chrome, Firefox, IE6) http://gyazo.com/c0ab15f209b4484e4a77d518f7e569d1.png

Ok, It's definitely a font scaling issue in Firefox 3.6.10 on Linux and Mac.  It's not happening in chrome (Linux or Mac) or Safari (Mac) anymore and I know there have been updates to both since August.

If you play around with Control +/- (or Apple +/-) in Firefox, you will see the issue.  My Windows VM isn't cooperating at the moment so I can't test it.

Hope that helps - and I understand that there may not be anything that can be done about it.

I'm not seeing any issues in Firefox 3.6.10 on Mac when zooming.

See attached for screenshots from Firefox on Mac.  Note that mb1.jpg looks ok, but in 2-4, the gap between the buttons differs.

did you find some ways to prevent this?

No, but I've not been doing any UI development since December.  I expect to ramp up again in the next month, but I don't know if I will need/be us button sets.

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/6159

I 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:

1. <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-buttonset

To 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:

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

or simply I remove it when I create the buttonset:

1. $(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.

1. .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