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

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.