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

Answer 2

I ended up setting the button's width and height to be equal and I also set the font-size to zero (so the icon image would be in the center of the button). The CSS code is:

#your_button_id {
   position: relative; 
   font-size: 0; 
   width: 23px; 
   height: 23px;
}

In your case it would be:

overlay.css({
    'cursor': 'pointer',
    'float': 'right',
    'width': '23px',
    'height': '23px',
    'font-size': '0'
});