2

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

Improve this question

1 Answer 1

Reset to default
2

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>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .