0

I have a lwc that displays up to 10 rows. If there are more than 5 rows, then a scrollbar appears on the right. My issue is that I have a button that I want to display at the bottom, after all the records have been viewed. Right now that button is appearing on row 6, even if there is data there. As you can see if there is data, the button is overwriting the value in a column. How do I define the button in the html file so it's displayed at the end of all the records?

<!--
 - Created by ratienza on 4/1/2020.
 -->

<!-- Order History -->
<template>
    <div class="c-container">
        <lightning-layout class='slds-scrollable_y' multiple-rows="true">
            <lightning-layout-item padding="around-small" size="12">
                <div class="page-section page-header">
                    <lightning-card>
                        <h3 slot="title">
                            <div if:true={editable} slot="footer">
                                <template if:true={showCreateOrder}>
                                    <lightning-button variant="brand" label="Create Order" title="Create an Order"
                                                      onclick={handleCreateOrderClick}
                                                      class="slds-m-left_x-small"></lightning-button>
                                </template>
                            </div>
                            <div if:false={editable} slot="footer">
                                Order History
                            </div>
                        </h3>
                        <div style="height: 180px;">
                            <div if:true={error}>
                                <p>{errorString}</p>
                            </div>
                            <div if:false={error}>
                                <lightning-datatable
                                        data={orderHistories}
                                        columns={columns}
                                        hide-checkbox-column
                                        key-field="id"
                                        default-sort-direction={defaultSortDirection}
                                        sorted-direction={sortDirection}
                                        sorted-by={sortedBy}
                                        onsort={onHandleSort}>
                                </lightning-datatable>
                            </div>
                        </div>

                        <div if:true={editable} slot="footer">
                            <lightning-button label="SAP Order Details" title="SAP Order Details"
                                              onclick={handleViewSAPOrderClick}
                                              class="slds-m-left_x-small"></lightning-button>
                        </div>
                    </lightning-card>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>

Thank you.

enter image description here


<template>
    <div class="c-container">
        <lightning-layout class='slds-scrollable_y' multiple-rows="true">
            <lightning-layout-item padding="around-small" size="12">
                <div class="page-section page-header">
                    <lightning-card>
                        <h3 slot="title">
                            <div if:true={editable} slot="footer">
                                <template if:true={showCreateOrder}>
                                    <lightning-button variant="brand" label="Create Order" title="Create an Order"
                                                      onclick={handleCreateOrderClick}
                                                      class="slds-m-left_x-small"></lightning-button>
                                </template>
                            </div>
                            <div if:false={editable} slot="footer">
                                Order History
                            </div>
                        </h3>
                        <div style="height: 180px;">
                            <div if:true={error}>
                                <p>{errorString}</p>
                            </div>
                            <div if:false={error}>
                                <lightning-datatable
                                        data={orderHistories}
                                        columns={columns}
                                        hide-checkbox-column
                                        key-field="id"
                                        default-sort-direction={defaultSortDirection}
                                        sorted-direction={sortDirection}
                                        sorted-by={sortedBy}
                                        onsort={onHandleSort}>
                                </lightning-datatable>
                            </div>
                        </div>

                        <div if:true={editable} slot="footer">
                            <lightning-button label="SAP Order Details" title="SAP Order Details"
                                              onclick={handleViewSAPOrderClick}
                                              class="slds-m-left_x-small"></lightning-button>
                        </div>
                    </lightning-card>
                </div>
            </lightning-layout-item>
        </lightning-layout>
    </div>
</template>
2
  • The button is defined like this right now: <div if:true={editable} slot="footer" > <lightning-button label="SAP Order Details" title="SAP Order Details" onclick={handleViewSAPOrderClick} class="slds-m-left_x-small"></lightning-button> </div> Dec 8, 2022 at 5:07
  • Could you provide the whole HTML code? Dec 8, 2022 at 8:31

0

You must log in to answer this question.

Browse other questions tagged .