Author Topic: Button Padding in Toolbar (jQuery 3.5.1, jQueryUI 1.12.1, PQGrid 2.4.1)  (Read 1472 times)

iokevins

  • Newbie
  • *
  • Posts: 2
    • View Profile
Sharing a fix for toolbar button CSS padding for PQGrid 2.4.1 with current stable releases of jQuery 3.5.1 (released 2020-05-04) and jQuery UI 1.12.1 (released 2016-09-14).

Here is working JSFiddle example code:
https://jsfiddle.net/iokevins/3Loev80n/85/

Here is what it looks like without the fix, with toolbar button losing all padding:
https://jsfiddle.net/iokevins/q2bzk85e/1/

The fix is to add a CSS style to the button declaration:
Code: [Select]
        var obj = {
          toolbar: {
            items: [{
              type: "button",
              label: 'Save Changes',
              icon: 'ui-icon-disk',
              style: "padding: 0.4em 1.0em 0.4em 0.4em"
            }]
          }
        };

It seems the upgrade from 1.11.4 to 1.12.0 reduces the default padding, from 0.4em, to 0, possibly per this changeset:
https://github.com/jquery/jquery-ui/commit/1f6ea8b78ac859bfecbdcdd092c2df3e2eec90ed (via the 1.12.0 release notes)

Hope this helps someone else.
« Last Edit: November 12, 2020, 09:46:06 am by iokevins »