1

I have a Lightning Card in a Tabset and I cannot remove the bottom border. Below is the code (I have removed the other tabs for simplicity).
I needed to use a CSS to display the Border in the Card - LWC lightning-card border not shown with slds-card_boundary

enter image description here

HTML

<lightning-tabset>
    <!--OVERVIEW-->
    <lightning-tab label="Overview">   
    <lightning-record-edit-form record-id={recordId} object-api-name="Match__c" onsuccess={handleSuccess}>         
        <lightning-card class="my-card slds-card_boundary" title="Search Details">
            <div class="slds-grid slds-gutters  slds-p-horizontal_small">
                <div class="slds-col slds-size_1-of-2">
                    <lightning-input-field field-name="EmploymentStatus__c" onchange={handleChange}></lightning-input-field>                                      
                </div>
                <div class="slds-col slds-size_1-of-2">
                    <lightning-input-field field-name="JobSearchStatus__c" onchange={handleChange}></lightning-input-field>                                        
                </div>
            </div>  
            <div class="slds-grid slds-gutters slds-p-horizontal_small">
                <div class="slds-col slds-size_1-of-1">
                    <lightning-input-field field-name="InterestRationale__c" onchange={handleChange}></lightning-input-field>
                    <lightning-input-field field-name="ConcurrentProcesses__c" onchange={handleChange}></lightning-input-field>
                </div>
            </div>
        </lightning-card>                 
    </lightning-record-edit-form>   
    </lightning-tab>
</lightning-tabset>      
</template> 

CSS

.my-card {
    display: block;
    margin: 5px 5px 5px 5px;
}
:host {
    --sds-c-textarea-sizing-min-height: 200px;
}

1 Answer 1

0

couple of things you can do to remove the border. Wrap the lightning-record-edit-form inside lightning-card. Remove the custom css class from lightning-card. Apply slds margin to the lightning-tab as below.

<template>
    <lightning-tabset>
        <!--OVERVIEW-->
        <lightning-tab label="Overview" class="slds-m-left_x-small slds-m-top_xxx-small slds-m-right_x-small">
            <lightning-card class="" title="Search Details">
                <lightning-record-edit-form record-id="0030o00002dgr2SAAQ" object-api-name="Contact" onsuccess={handleSuccess}>
                    <div class="slds-grid slds-gutters  slds-p-horizontal_small">
                        <div class="slds-col slds-size_1-of-2">
                            <lightning-input-field field-name="FirstName" onchange={handleChange}>
                            </lightning-input-field>
                        </div>
                        <div class="slds-col slds-size_1-of-2">
                            <lightning-input-field field-name="LastName" onchange={handleChange}>
                            </lightning-input-field>
                        </div>
                    </div>
                    <div class="slds-grid slds-gutters slds-p-horizontal_small">
                        <div class="slds-col slds-size_1-of-1">
                            <lightning-input-field field-name="Email" onchange={handleChange}></lightning-input-field>
                            <lightning-input-field field-name="Phone" onchange={handleChange}></lightning-input-field>
                        </div>
                    </div>
                </lightning-record-edit-form>
            </lightning-card>
        </lightning-tab>
    </lightning-tabset>
</template>

enter image description here

2
  • Thanks for that! I have a few other cards on this page all using the same lighting-record-edit l-form. Is the best practice to include this in the card. Commented Nov 20, 2022 at 23:10
  • Yes, you can use for all cards.
    – Saroj Bera
    Commented Nov 21, 2022 at 6:06

You must log in to answer this question.

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