Author Topic: How to shrink size the delete button  (Read 496 times)

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 128
    • View Profile
How to shrink size the delete button
« on: January 31, 2022, 11:10:53 am »
I have tried to shrink the size of delete button to reduce the height of every row, but got failed even tried many times.
Is there any solution for it?
« Last Edit: January 31, 2022, 11:16:43 am by hyh888 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6113
    • View Profile
Re: How to shrink size the delete button
« Reply #1 on: January 31, 2022, 06:29:24 pm »
Hope this helps to reduce the size of jQueryUI button.

https://stackoverflow.com/questions/2724041/how-do-you-size-the-jquery-button

hyh888

  • Pro Enterprise
  • Full Member
  • *
  • Posts: 128
    • View Profile
Re: How to shrink size the delete button
« Reply #2 on: February 01, 2022, 03:52:41 am »
This idea can do reduce the height of the button and make no trouble for row height, but the cissors icon is not in the middle vertically any more. My code is as follow:
             { title: "删除", editable: false, minWidth: 123, sortable: false,
               render: function (ui) {return "<button type='button' class='delete_btn'></button>";},
              postRender: function (ui) {
                  var rowIndx = ui.rowIndx,grid = this,$cell = grid.getCell(ui);
                 $cell.find("button").button({icons: { primary: 'ui-icon-scissors' }})//
                 .bind("click", function () {
                     grid.addClass({ rowIndx: ui.rowIndx, cls: 'pq-row-delete' });
                     setTimeout(function () {
                         var ans = window.confirm("确定要删除第 " + (rowIndx + 1) + "行吗?");
                         grid.removeClass({ rowIndx: rowIndx, cls: 'pq-row-delete' });
                         if (ans) {grid.deleteRow({ rowIndx: rowIndx });}
                     })
                    }).css({height:'15px'});
            }
           }