[SalesForce] SLDS pills without container not working

I have following component which renders pills after filtering showing attributes of filtering. I want to render them individually without container but its not working and I am getting all of them inside a container. Why should this happen?

Component:

<aura:component >
    <aura:attribute name="pillsList" type="string[]" />
    <span class="slds-pill">
        <aura:iteration var="pillLabel" items="{!v.pillsList}">
            <span class="slds-pill">{!pillLabel}
                <button class="slds-button slds-button--icon slds-pill__remove" title="Remove">
                    <lightning:icon iconName="utility:close" size="x-small" class="slds-input__icon" alternativeText="Remove" />
                </button>
            </span>
        </aura:iteration>
    </span>
</aura:component>

Expected :

enter image description here

Actual:

enter image description here

Best Answer

Remove slds-pill In outer Span tag <span class="slds-pill"> and try it.

<aura:component >
    <aura:attribute name="pillsList" type="string[]" />
    <span>
        <aura:iteration var="pillLabel" items="{!v.pillsList}">
            <span class="slds-pill">{!pillLabel}
                <button class="slds-button slds-button--icon slds-pill__remove" title="Remove">
                    <lightning:icon iconName="utility:close" size="x-small" class="slds-input__icon" alternativeText="Remove" />
                </button>
            </span>
        </aura:iteration>
    </span>
</aura:component>
Related Topic