0

I'm using Kendo UI and I have grid that have an Action Column. I'm using images for action. There are 3 types of action: receipt, confirm, and cancel. How to centered these 3 icons? Here's my code:

{
    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>`
    }
}

My CSS code:

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

As you can see, I use 6 images for this. Half of them is colored grey to show the user if that action is cannot be clicked. I'm having trouble to center these images. Can you help me to achieve this? Maybe with CSS style or the magic of Jquery~

Thanks

Ryandhika Rukmana
  • 39
  • 8
  • 2
    please create a code snippet – Xenio Gracias Mar 12 '19 at 09:39
  • If you're using `position: absolute` on your images, I would suggest centering them with `left: 50%; transform: translateX(-50%);` (see the third answer to [this post](https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div) to understand how it works). – Jake Mar 12 '19 at 09:43
  • 1
    @Jake it works but I'm not sure it will be responsive. But it's enough for me. Thanks – Ryandhika Rukmana Mar 12 '19 at 10:13
  • @RyandhikaRukmana Is your issue solved ? Was my answer the solution ? If so please mark it as accepted please. – Jake Apr 08 '19 at 14:54

1 Answers1

0

If you're using position: absolute on your images, I would suggest centering like so :

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

See the third answer to this post to understand how it works.

Jake
  • 1,398
  • 1
  • 9
  • 19