LWC Lightning-card slot alignment issue

lightning-cardlightning-web-componentsslots

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?

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>
. . .

Best Answer

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.

Related Solutions

[SalesForce] SLDS lightning card margin issue

The cards should be in their own layout boxes (instead of being the layout boxes), and should not be floating. Elements that restrict size changes (e.g. slds-size_1-of-3) should be wrapped around whatever it is you're trying to size. Most of the time it doesn't matter, but it helps to get in the habit of doing so, and doing so means using lightning:layoutItem.

Here's a self-contained demonstration using your non-dynamic card example (note: I converted this to an iteration for brevity, it still works "the long way around"):

<aura:application extends="force:slds">
    <aura:attribute name="items" type="Integer[]" default="[1,2,3,4,5,6]" />
    <div>Non Dynamic Cards</div>
        <lightning:layout multipleRows="true">
            <aura:iteration items="{!v.items}" var="item">
        <lightning:layoutItem size="4" padding="around-small">
            <lightning:card >
                <aura:set attribute="title">
                    <lightning:icon iconName="utility:connected_apps" size="small"/>
                    Card {!item}
                </aura:set>
                <aura:set attribute="footer">
                    <lightning:badge label="Tag1"/>
                    <lightning:badge label="Tag2"/>
                    <lightning:badge label="Tag3"/>
                </aura:set>
                Card Body (custom component)
            </lightning:card>
        </lightning:layoutItem>
            </aura:iteration>
    </lightning:layout>
</aura:application>

[SalesForce] Text doesn’t wrap in
and

You just need to add CSS to wrap the text.

overflow-wrap: break-word;

define a class in CSS file

.wrapped-content{
    overflow-wrap: break-word;
}

And add this class to the div.

<template>
    <div class="slds-grid slds-grid_align-center">
        <lightning-card class="slds-size_1-of-3">
            <div class="slds-m-around_medium">
                <h1 class="slds-text-align_center">Card question</h1>
                <div class="wrapped-content">adwadwwdawdwadwadawdawdawdawddwawdadwdawdawdwadadwdadawdwdadwadawddawdwadawdadawd</div>
                <div class="slds-m-top_small slds-align_absolute-center">
                    <button class="slds-button slds-button_destructive">Show</button>
                    <button class="slds-button slds-button_success">Next</button>
                </div>
            </div>
        </lightning-card>
    </div>
</template>

Best Answer

Related Solutions

[SalesForce] SLDS lightning card margin issue

[SalesForce] Text doesn’t wrap in and

Related Topic

[SalesForce] Text doesn’t wrap in
and