Free-jqGrid - キャプションクリック時のボタンは、中央でのみ機能します

Question

私は以下のようにfree-jqGridを持っています。それには+アイコンのボタンがあります。

予想される動作：マウスオーバーすると、プラスアイコンの色が白くなり、クリックすると警告メッセージが表示されます。

しかし、この機能は、マウスがボタンの中央に向いている場合にのみ機能します。ブラウザの右端からマウスを移動してボタンの右下に移動すると、視覚的な変化は起こりません。クリックすると何も起こりません。しかし、2番目のフィドルに示されているように、単純な動的なボタン（グリッドなし）で行うと正しく動作します。グリッドキャプション

1. ボタン：一人でFiddle 1
2. ダイナミックボタン：フリーjqgridに/回避策にこの問題を解決する方法Fiddle 2

？

注：私は使用していますGoogle Chromeバージョン58

キャプションスクリプト

var htmlButtonElement = '<button id="btnAddProvider" type="button" class="btn btn-info toolbar-button" title="Add Provider" style="float:left;">'+ 
       '<span id="spanAddProvider" class="glyphicon glyphicon-plus" style="pointer-events: none;"></span>'+ 
      '</button>' 


     function getGridCaption() { 
      return "<div style='font-size:15px; font-weight:bold; display:inline; padding-left:10px;'><span class='glyphicon glyphicon-check' style='margin-right:3px;font-size:14px;'></span>" + getCurrentPractice() + " " + "</div>" + 
      "<div style='float:right; padding-right:20px; padding-bottom:10px; display:inline;>" + 
      "<div style='float:right;width:550px; padding-bottom:20px;'>" + 
       "<div class='btn-group' style='float:right; padding-top:1px;'> " + 
        htmlButtonElement+ 
       "</div>" + 
       "<input type='text' class='form-control' id='filter' placeholder='Search' style='width:250px; height:30px; float:right; ' />" + 
      " </div>" + 
      "</div><div class='ui-helper-clearfix'></div>"; 
     } 

更新：

オレグの答えに従って修正：Fiddle 3

Answer 1

jqGridに関する無料のjQuery UI CSSについて質問しています。 jQuery UIクラスのほとんどの要素は、background-colorに加えて、background-imageを定義しています。正確には、jQuery UIは、background-image,background-colorおよび他のbackground-xxx CSSプロパティを一度に定義するためにbackgroundを使用します。したがって、background-color: silverの代わりにbackground: silverを使用するか、background-color: silverを引き続き使用しますが、さらにbackground-image: noneを追加する必要があります。ホバー状態のボタンのCSSプロパティを定義するには、さらにルール（.toolbar-button:hoverなど）を定義することができます。例えば、デモhttps://jsfiddle.net/OlegKi/x59xx4n1/3/は、次のプロパティを使用

.toolbar-button { 
    background-color: silver; 
    background-image: none; 
    color: darkblue; 
} 
.toolbar-button:hover { 
    background-color: green; 
    color: yellow; 
} 

を更新：デモhttps://jsfiddle.net/OlegKi/x59xx4n1/5/はhidegrid: falseオプションを使用するもう一つのグリッドのヘッダからui-jqgrid-captionクラスを削除します。