Free-jqGrid - Le bouton sur le sous-titre ne fonctionne qu'au centre

Question

J'ai un free-jqGrid comme indiqué ci-dessous. Il a un bouton avec une icône + dedans.

Comportement attendu: Au passage de la souris, la couleur de l'icône plus devient blanche et un clic affiche un message d'alerte.

Mais cette fonctionnalité ne fonctionne que lorsque la souris est pointée vers le centre du bouton. Si je déplace la souris du bord droit du navigateur et que j'atteins la partie inférieure droite du bouton, aucun changement visuel ne se produit - et rien ne se passe au clic. Cependant, si je le fais sur un simple bouton dynamique (sans grille) comme indiqué dans le deuxième violon, cela fonctionne correctement.

1. Bouton dans la grille Légende: Fiddle 1
2. Bouton dynamique seul: Fiddle 2

Comment corriger/solution dans ce libre-jqGrid?

Note: J'utilise Google Chrome Version 58.

Légende Script

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>"; 
     } 

Mise à jour:

fixe selon la réponse de Oleg: Fiddle 3

Answer 1

Il me semble que votre question plus sur jQuery UI CSS, que vous utilisez comme libre jqGrid. La plupart des éléments des classes d'interface utilisateur jQuery définissent background-image en plus de background-color. Pour être exact, jQuery UI utilise background pour définir background-image, background-color et d'autres propriétés CSS background-xxx à la fois. Ainsi, vous devez utiliser background: silver au lieu de background-color: silver ou continuer à utiliser background-color: silver, mais ajouter background-image: none en plus. Vous pouvez en outre définir des règles :hover (comme .toolbar-button:hover) pour définir les propriétés CSS du bouton dans l'état hover. Par exemple, la démo https://jsfiddle.net/OlegKi/x59xx4n1/3/ utilise les propriétés suivantes

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

MISE À JOUR: Une plus démo https://jsfiddle.net/OlegKi/x59xx4n1/5/ utilise l'option hidegrid: false et supprimer ui-jqgrid-caption classe de l'en-tête de la grille.