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

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>

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.