Почему мои текстовые кнопки jquery UI не квадратные?

Question

Я делаю следующее в fullCalendar с темой jQuery-UI:

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'

  });

Но мои кнопки выглядят так - http://cl.ly/2H1j3Z3i3G34271O2E2w

Я также пытался сделать это без кнопок и установить «.ui-state-default .ui-icon» на промежутке, но фон не появился. Кто-нибудь знает, что может быть причиной этого?

Я бы хотел, чтобы кнопки были квадратными, как на первом значке здесь :

Answer 1

Я думаю, вам просто нужно добавить стиль добавления, width:auto:

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

См. Пример: http://jsfiddle.net/william/Lu3GS/1/.

Глядя на свой код, вам на самом деле не требуетсяте, чтобы быть фактическими кнопками.В этом случае вы можете использовать встроенные значки: http://jsfiddle.net/2U5TN/1/.

Answer 2

В итоге я установил ширину и высоту кнопки равными, а также установил нулевой размер шрифта (чтобы изображение значка находилось в центре кнопки).Код CSS:

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

В вашем случае это будет:

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