在按键图标弹出离子显示问题

Question

下面的代码：

var importPopup = $ionicPopup.show({ 
     title: 'Select import source', 
     subTitle: '(GPX, KML or WMS layer)', 
     scope: $scope, 
     cssClass: "popup-import", 
     buttons: [ 
     { 
      text: '<b>From Drive</b>', 
      type: 'button icon-left icon-google-drive button-positive' 
     }, 
     { 
      text: '<b>From URL</b>', 
      type: 'button icon-left ion-link button-positive', 
      onTap: function(e) { 
       $scope.url(); 
      } 
     }, 
     { 
      text: '<b>Cancel</b>', 
      type: 'button icon-left ion-close-round button-assertive' 
     } 
     ] 
    }); 

和输出它产生：https://imgur.com/y790RKC

当显示只有两个按钮，文本和图标正确对齐。当只有图标显示三个按钮时，它们也会正确对齐。在CSS中，按钮被格式化为行。如果没有这种格式的按钮看起来是这样的：https://imgur.com/zrxqwhl

这里是CSS的相关章节：

.popup-import .popup-buttons 
{ 
    display: block; 
} 

任何建议表示赞赏。

Answer 1

添加到您的CSS：

.popup-buttons .button.icon-left:not(.button-small), 
.popup-buttons .button.icon-right:not(.button-small) { 
    // fix for intel-popup with icons 
    line-height: 40px !important; 
}