0

It appears that I can't put a lightning-input in a slot. I would like the input and button to line up side by side on the right, preferably in line with the lightning-card title. Any ideas on how to accomplish this?

enter image description here

HTML:

                            <lightning-card class="slds-size_12-of-12" title="Requests" icon-name="standard:lead_list" variant="narrow">
                                <div class="slds-grid slds-wrap" slot="actions">                                               
                                    <div class="slds-m-top_small slds-m-bottom_medium"> 
                                        <lightning-input
                                            class="slds-m-top_none slds-m-bottom_small slds-m-right_xx-large"
                                            onchange={searchRR}
                                            name="enter-search"
                                            label=""
                                            type="search"
                                            placeholder="Search this list..."
                                            slot="actions">
                                        </lightning-input>
                                    </div>
                                    <template if:false={isPortalUser}>
                                        <div class="slds-float_right">
                                            <lightning-button
                                                variant="neutral" 
                                                label="New" 
                                                title="New" 
                                                onclick={handleClick} 
                                                class="slds-m-left_x-small"
                                                slot="actions">
                                            </lightning-button>
                                        </div>
                                    </template>
                                </div>
. . . 

1 Answer 1

2

Input fields, by default, have a label. Use the variant="label-hidden" to remove this extra space. Also, using slot on each element moves them all up to the "top" which results in the weird appearance. Remove the slot attributes on all except the top div.

<lightning-card class="slds-size_12-of-12" title="Requests" icon-name="standard:lead_list" variant="narrow">
    <div class="slds-grid slds-wrap" slot="actions">
        <lightning-input class="slds-size_8-of-12" onchange={searchRR} name="enter-search" type="search"
            placeholder="Search this list..." variant="label-hidden" label="label">
        </lightning-input>
        <lightning-button variant="neutral" label="New" title="New" onclick={handleClick} class="slds-p-left_large">
        </lightning-button>
    </div>
</lightning-card>

Edit: Demo.

You must log in to answer this question.

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