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

2 Answers 2

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>
1
  • Thanks Jeff. Brilliant.. Dec 15, 2021 at 19:34
0

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

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
    Oct 10 at 9:57

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.