Badge positioning on left side of list item


#1

Hey,

Please check the following code pen:

In this pan i demonstrate a list with badges. First of all, I wish to create badges on the left side of the list item, and this should “stack” with icons like it does on the right side. Is there any way to do this?

Second, there seems to be an issue with badges on top of icons when there is an icon for both sides (left and right). If nobody can tell me what I’m doing wrong here, I will be creating an issue for it.

Thanks on beforehand!

iwan


#2

I know this is an old thread but was wondering if anyone found a solution to this question, anybody?


#3

I’ve made something like that (sass code)

.item {
    &.item-badge-left {
        &:not(.item-complex), .item-content {
            padding-left: 54px;
        }
        &.item-icon-left {
            &:not(.item-complex), .item-content {
                padding-left: 108px;
            }
            .badge {
                left: 54px;
            }
        }
        .badge {
            right: auto;
            left: 11px;
        }
    }
}