0

I am trying to create a tile which will iterate records. I am trying to place the button menu exactly opposite to "Salesforce UX" towards right corner. I am unable to it. Below is my code. How to place it towards right corner of tile.

<div class="demo-only slds-card">
        <article class="slds-tile">
            <h3 class="slds-tile__title slds-truncate" title="Salesforce UX">
                <a href="#">Salesforce UX</a>
            </h3>
            <div class="slds-p-around_x-small lgc-bg">
                <lightning-button-menu alternative-text="Show menu">
                    <lightning-menu-item value="MenuItemOne" label="Menu Item One"></lightning-menu-item>
                    <lightning-menu-item value="MenuItemTwo" label="Menu Item Two"></lightning-menu-item>
                    <lightning-menu-item value="MenuItemThree" label="Menu Item Three"></lightning-menu-item>
                    <lightning-menu-item value="MenuItemFour" label="Menu Item Four"></lightning-menu-item>
                </lightning-button-menu>
            </div>

            <div class="slds-tile__detail">
                <dl class="slds-list_horizontal slds-wrap">
                    <dt class="slds-item_label slds-text-color_weak slds-truncate" title="First Label">Name:</dt>
                    <dd class="slds-item_detail slds-truncate" title="Description for first label">Description for first label
                    </dd>
                    <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Address:</dt>
                    <dd class="slds-item_detail slds-cell-wrap" title="Description for second label">Description for
                        second label
                        Description for second label
                    </dd>
                    <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Industry:</dt>
                    <dd class="slds-item_detail" title="Description for second label">Manufacture
                    </dd>
                    <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">CreatedDate:</dt>
                    <dd class="slds-item_detail" title="Description for second label">2021-11-12
                    </dd>
                    <dt class="slds-item_label slds-text-color_weak slds-truncate" title="Second Label">Phone:</dt>
                    <dd class="slds-item_detail" title="Description for second label">+1 1111111111
                    </dd>
                </dl>
            </div>
        </article>
    </div>

enter image description here

Improve this question

2 Answers 2

Reset to default
0

The Tile blueprint provided by the Lightning Design System shows how to accomplish this.

The key piece you're missing is using slds-grid and slds-grid_align-spread to put the title and actions in the same row, spread aligned to the left and right.

  <article class="slds-tile">
    <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
      <h3 class="slds-tile__title slds-truncate" title="Tile Title">
        <a href="#">Tile Title</a>
      </h3>
      <div class="slds-shrink-none">
        <!-- Put your button menu here -->
      </div>
    </div>
    <div class="slds-tile__detail">
      <!-- Tile Content -->
    </div>
  </article>
Improve this answer
1
  • Thanks Jeff. Brilliant..
    – sfdc_to_learn
    Commented Dec 15, 2021 at 19:34
0

add this: slot="actions"
https://developer.salesforce.com/docs/component-library/bundle/lightning-card/example

Improve this answer
1
  • 1
    Can you expand on this and add a relevant example? Links break over time and chances are you'll only get down voted for this as it is. Welcome to the site!
    – Matt Lacey ♦
    Commented Oct 10, 2022 at 9:57

You must log in to answer this question.

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