-1

My code is wrapped in an and styled with slds-card; not sure why the background is transparent. How can I get the default background styling to show?

enter image description here

    <article className="slds-card">
        <div className="slds-card__header slds-grid">
            <header className="slds-has-flexi-truncate">
                <h2 className="slds-text-heading_small">{! v.filterTitle }</h2>
            </header>
            <span className="slds-badge slds-m-right_small filter-count-badge">{!v.filterCount} </span>
        </div>



        <div className="slds-card__body">

            <div style="margin: 20px">
                <table className="slds-table slds-table_fixed-layout slds-table_bordered slds-no-row-hover slds-table_cell-buffer">
                    <thead>
                        <tr className="slds-text-title_caps">
                            <th>Field</th>
                            <th>Operator</th>
                            <th>Value</th>
                            <th className="slds-cell-shrink" /></tr>
                    </thead>    

                    <tbody>
                        <aura:iteration items="{!v.filterComponents}" var="filterRow">
                            <tr>
                                {!filterRow}
                            </tr>
                        </aura:iteration>
                    </tbody>

                </table>
            </div>

        </div>            


        <footer className="slds-card__footer">
            <lightning:buttonGroup >
              <lightning:button variant="neutral" label="Add Filter" onclick="{!c.addFilter}" />
              <lightning:button variant="neutral" label="Remove Filters" onclick="{!c.removeFilters}" />
              <lightning:button variant="brand" label="Apply and Run" onclick="{!c.fireApplicationEvent}" />
            </lightning:buttonGroup>                



        </footer>            

    </article>

UPDATE: I ended up doing the following and it works; issue was using the class attribute instead of classname, but ultimately i just used the standard lightning component.

<lightning:card iconName="{!v.filterIcon}"  >
        <aura:set attribute="title">
            <span class="slds-float_left slds-p-left_xx-small slds-p-vertical_xx-small"> {! v.filterTitle }</span>

            <span class="slds-float_right slds-p-right_xx-small slds-p-vertical_xx-small" ><lightning:badge label="{!v.filterCount}" /> </span>

        </aura:set>'
1
  • When you edited your post you broke your image. You want want to re-upload it. – gNerb Apr 25 '18 at 15:06
5

This is because you're using the wrong attribute className. If you want to add the standard lightning design system to your html, you need to use the attribute class like this: <article class="slds-card">

Is there any reason why you don't use the standard lightning component to insert your card to your component? You should read this documentation.

1
  • reason i didn't use standard card - was because I couldn't get the title and badge component to align well.. ultimately i ended up doing that though...see my edit – Shuaib Ahmed Apr 25 '18 at 14:59

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.