ParamQuery grid support forum

General Category => Help for ParamQuery Grid (free version) => Topic started by: iokevins on November 12, 2020, 09:41:52 am

Title: Button Padding in Toolbar (jQuery 3.5.1, jQueryUI 1.12.1, PQGrid 2.4.1)
Post by: iokevins on November 12, 2020, 09:41:52 am

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/ (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/ (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 (https://github.com/jquery/jquery-ui/commit/1f6ea8b78ac859bfecbdcdd092c2df3e2eec90ed) (via the 1.12.0 release notes (https://jqueryui.com/changelog/1.12.0/#button))

Hope this helps someone else.