Why are my text-less jquery UI buttons not square?

Question

I am doing the following within a jQuery-UI themed fullCalendar:

var overlay = $('<div />');
   overlay.addClass(event.status);
   if(overlay.hasClass('pending')) {
      primaryIcon = 'ui-icon-check';
    } else {
      primaryIcon = 'ui-icon-cancel';
    }
    overlay.button({ icons: {
      primary: primaryIcon },
      text:false
    });

  overlay.css({
    'cursor': 'pointer',
    'float': 'right'

  });

But my buttons look like this - http://cl.ly/2H1j3Z3i3G34271O2E2w

I also tried doing it without buttons and setting '.ui-state-default .ui-icon' on a span but the background did not show up. Anyone know what might be causing this?

I would like the buttons to be square like the first icon here :

Answer 1

I think you just need to add an addition style, width:auto:

overlay.css({
    'cursor': 'pointer',
    'float': 'right',
    'width': 'auto'
});

See example: http://jsfiddle.net/william/Lu3GS/1/.

Looking at your code, you don't really require those to be actual buttons. If that's the case, you may consider using inline icons: http://jsfiddle.net/2U5TN/1/.