Как сделать 3 экшн-изображения по центру столбца сетки? - PullRequest
Новая
       15

Как сделать 3 экшн-изображения по центру столбца сетки?

0 голосов
/ 12 марта 2019

Я использую Kendo UI и у меня есть сетка с колонкой действий.Я использую изображения для действий.Существует 3 типа действий: получение, подтверждение и отмена.Как центрировать эти 3 иконки?Вот мой код: 

{
    name: 'Action',
    text: 'Action',
    align: 'center',
    width: 150,
    template: function (item) {
        return item.is_paid != true ? `<div class="action-icon">
            <div class="button-logo">
                <img src="img/paid-grey.svg" class="receipt-grey icon-btn icon-grey icon-receipt">
            </div>
            <div class="button-logo">
                <img src="img/confirm.svg" class="confirm icon-btn icon-style icon-confirm" onClick="confirm()">
                <span class="confirmText">Konfirmasi</span>
            </div>
            <div class="button-logo">
                <img src="img/cancel.svg" class="cancel icon-btn icon-style icon-cancel" onClick="cancel()">
                <span class="cancelText">Cancel</span>
            </div>
        </div>` :
            `<div class="action-icon-paid">
            <div class="button-logo">
                <img src="img/bukti-bayar.svg" class="receipt icon-btn icon-style" onClick="receipt()">
                <span class="receiptText">Bukti Bayar</span>
            </div>
            <div class="button-logo">
                <img src="img/confirm-grey.svg" class="confirm icon-btn icon-grey icon-confirm-grey">
            </div>
            <div class="button-logo">
                <img src="img/cancel-grey.svg" class="cancel icon-btn icon-grey icon-cancel-grey">
            </div>
        </div>`
    }
}

Мой код CSS: 

.action-icon {
            display: flex !important;
            margin-left: auto;
            margin-right: auto;
            // display: block;
        }
        .action-icon-paid {
            display: flex !important;
            margin-left: auto;
            margin-right: auto;
            // display: block;
        }
        .icon-style {
            width: 35px;
            cursor: pointer; // transform: scale(3);
        }
        .icon-grey {
            width: 35px;
            cursor: default; // transform: scale(3);
        }
        .icon-receipt {
            position: relative;
            top: 1.2px;
            left: 0px;
        }
        .icon-confirm {
            position: relative;
            left: -22.8px;
        }
        .icon-confirm-grey {
            position: relative;
            left: -22.8px;
        }
        .icon-cancel {
            position: relative;
            left: -42.8px;
        }
        .icon-cancel-grey {
            position: relative;
            left: -42.8px;
        }
        .button-logo {
            margin: 0px 14px;
            position: relative;
            width: 50px;
        }
        .receiptText {
            visibility: hidden;
            width: 67px;
            background-color: #393940;
            color: #F4723D;
            text-align: center;
            border-radius: 6px;
            padding: 0px 0;
            /* Position */
            position: absolute;
            z-index: 1;
            bottom: 60%;
            left: -50%;
            font-size: small;
        }
        .button-logo:hover .receiptText {
            visibility: visible;
        }
        .confirmText {
            visibility: hidden;
            width: 62px;
            background-color: #393940;
            color: #F4723D;
            text-align: center;
            border-radius: 6px;
            padding: 0px 0;
            /* Position */
            position: absolute;
            z-index: 1;
            bottom: 60%;
            left: -110%;
            font-size: small;
        }
        .button-logo:hover .confirmText {
            visibility: visible;
        }
        .cancelText {
            visibility: hidden;
            width: 45px;
            background-color: #393940;
            color: #F4723D;
            text-align: center;
            border-radius: 6px;
            padding: 0px 0;
            /* Position */
            position: absolute;
            z-index: 1;
            bottom: 60%;
            left: -130%;
            font-size: small;
        }
        .button-logo:hover .cancelText {
            visibility: visible;
        }

Как видите, я использую для этого 6 изображений.Половина из них окрашена в серый цвет, чтобы показать пользователю, что это действие невозможно щелкнуть.У меня проблемы с центрированием этих изображений.Можете ли вы помочь мне достичь этого?Может быть, с помощью стиля CSS или магии Jquery ~

Спасибо

1 Ответ

0 голосов
/ 12 марта 2019

Если вы используете положение: абсолютное на ваших изображениях, я бы посоветовал центрироваться так: 

left: 50%;
transform: translateX(-50%);

См. Третий ответ на в этом посте , чтобы понять, как это работает.

...