0

I would like the buttons here to appear on top of each other, however I can't work out how to do it.

enter image description here

This is what I've done so far:

        <lightning-layout>
            <div class="slds-text-heading_small slds-p-left_medium slds-p-top_medium">
                Current Objects Configured
            </div>
        </lightning-layout>
        <div class="slds-p-around_small">
            <template for:each={settings} for:item="setting">
                <lightning-layout key={setting.id}>
                    <!-- <lightning-layout-item padding="around-small">
                        {setting.objectName}
                    </lightning-layout-item> -->
                    <div class="slds-p-bottom_x-small">
                        <lightning-layout-item>
                            {setting.objectName}
                            <lightning-button-icon
                                icon-name="utility:delete"
                                data-id={setting.id}
                                onclick={setting.handleDelete}
                                class="slds-p-left_small"
                            ></lightning-button-icon>
                        </lightning-layout-item>
                    </div>
                </lightning-layout>
            </template>
        </div>

1 Answer 1

1

The <lightning-layout> should be outside the iteration. You also need the multiple-rows attribute, and each <lightning-layout-item> should specify a size:

<lightning-layout multiple-rows>
  <template for:each={settings} for:item="setting">
    <lightning-layout-item key={setting.id} size="10">
      ...
    </lightning-layout-item>
    <lightning-layout-item key={setting.id} size="2">
      ...
    </lightning-layout-item>
  </template>
</lightning-layout>

You must log in to answer this question.

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