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

离子弹出窗口中的图标按钮显示问题

1 个答案: