Icon-only Button in Toolbar

[TonyLeech]

I'm trying to save space on the toolbar by using buttons with an icon only, i.e. without the text label.  By default this results in a very thin button, only 8 pixels tall because of the 4 pixel dimension of the curved corners.

I've tried changing various properties (e.g. height) using 'style', and I've tried implementing a new 'cls', but I'm not having any luck.  Finally I tried using 'ui-button-icon-only' from Jquery UI but I couldn't get that to change anything either.

Can you help?  Many thanks.

[paramvir]

Same here. No luck so far. I've added this to bug log/ feature enhancement.

Edit:
=============

It can be done by passing appropriate options (from jQueryUI API ) to the item.

Code: [Select]

{
       type: 'button',
       options: { text: false, showLabel: false },
       icon: 'ui-icon-document'
}

I've also updated the docs. http://paramquery.com/pro/api#option-toolbar

[TonyLeech]

That's brilliant.  You are a genius.  I'd love to know how you figured that out so fast.

Works very well for 'Save changes', 'Undo', 'Redo', 'Cancel Changes' and 'Refresh'...all very well know icons these days.  My toolbar looks a lot simpler now.  Thank you.

Quick note: I did provide a replacement css to increase the width slightly and remove the padding that was making the first try a little tall...

   .pq-grid button.ui-button-icon-only {
      width: 32px;
      margin-right: 5px;
      padding: 0 0;
   }