0

I'm trying t create a custom lightning aura component that looks like below screenshot. I've used the Page Header Object Home in SLDS, as well as the listbox pattern from the combobox or picklist SLDS. However, I'm having a hard time positioning the listbox to open up and line up correctly. What is the best practice or guidance for this listbox? The example on the lightningdesignsystem.com doesn't have a listbox opened up for the page headers. Thank you!

enter image description here

https://www.lightningdesignsystem.com/components/page-headers/?variant=base#Object-Home

https://www.lightningdesignsystem.com/components/picklist/

<aura:component implements="force:appHostable">


<div class="slds-page-header">
    <div class="slds-page-header__row">
        <div class="slds-page-header__col-title">
            <div class="slds-media">
                <div class="slds-media__figure">
                    <lightning:icon iconName="standard:product" class="Test-request-icon" varian="bare" alternativeText="Test Requests"/>
                </div>
                <div class="slds-media__body">
                    <div class="slds-page-header__name">
                        <div class="slds-page-header__name-title">
                            <h1>
                                <span>Test</span>
                                <span class="slds-page-header__title slds-truncate" title="My Test List">My Pending Approval</span>
                            </h1>
                        </div>
                        <div class="slds-page-header__name-switcher">
                            <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
                                <lightning:buttonIcon iconName="utility:down" variant="bare" alternativeText="List Views"/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slds-page-header__col-actions">
            <!-- <div class="slds-page-header__controls">
            <div class="slds-page-header__control">
                <ul class="slds-button-group-list">
                <li>
                    <button class="slds-button slds-button_neutral">New</button>
                </li>
                <li>
                    <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
                    <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-haspopup="true" title="More Actions">
                        <svg class="slds-button__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                        </svg>
                        <span class="slds-assistive-text">More Actions</span>
                    </button>
                    </div>
                </li>
                </ul>
            </div>
            </div> -->
        </div>
    </div>
    <div class="slds-page-header__row">
        <div class="slds-page-header__col-meta">
            <p class="slds-page-header__meta-text">10 items • Updated 13 minutes ago</p>
        </div>
        <div class="slds-page-header__col-controls">
            <div class="slds-page-header__controls">
            <div class="slds-page-header__control">
                <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
                <!-- <button class="slds-button slds-button_icon slds-button_icon-more" aria-haspopup="true" aria-expanded="false" title="List View Controls">
                    <svg class="slds-button__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#settings"></use>
                    </svg>
                    <svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                    </svg>
                    <span class="slds-assistive-text">List View Controls</span>
                </button> -->
                </div>
            </div>
            <div class="slds-page-header__control">
                <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
                <!-- <button class="slds-button slds-button_icon slds-button_icon-more" aria-haspopup="true" aria-expanded="false" title="Change view">
                    <svg class="slds-button__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#table"></use>
                    </svg>
                    <svg class="slds-button__icon slds-button__icon_x-small" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#down"></use>
                    </svg>
                    <span class="slds-assistive-text">Change view</span>
                </button> -->
                </div>
            </div>
            <div class="slds-page-header__control">
                <!-- <button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Edit List">
                <svg class="slds-button__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#edit"></use>
                </svg>
                <span class="slds-assistive-text">Edit List</span>
                </button> -->
            </div>
            <div class="slds-page-header__control">
                <!-- <button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Refresh List">
                <svg class="slds-button__icon" aria-hidden="true">
                    <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#refresh"></use>
                </svg>
                <span class="slds-assistive-text">Refresh List</span>
                </button> -->
            </div>
            <div class="slds-page-header__control">
                <!-- <ul class="slds-button-group-list">
                <li>
                    <button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Charts">
                    <svg class="slds-button__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#chart"></use>
                    </svg>
                    <span class="slds-assistive-text">Charts</span>
                    </button>
                </li>
                <li>
                    <button class="slds-button slds-button_icon slds-button_icon-border-filled" title="Filters">
                    <svg class="slds-button__icon" aria-hidden="true">
                        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#filterList"></use>
                    </svg>
                    <span class="slds-assistive-text">Filters</span>
                    </button>
                </li>
                </ul> -->
            </div>
            </div>
        </div>
    </div>
</div>

<div id="listbox-id-3" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid custom-list-views" role="listbox">
    <ul class="slds-listbox slds-listbox_vertical" role="presentation">

        <li role="presentation" class="slds-listbox__item">
            <div id="object0" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="presentation">
                <div class="slds-listbox__option-header slds-text-title_caps" role="presentation">List Views</div>
            </div>
        </li>
                                
      <li role="presentation" class="slds-listbox__item">
        <div id="option1" class="slds-media slds-listbox__option slds-listbox__option_entity slds-media_center" role="option">
          <span class="slds-media__figure slds-listbox__option-icon">
            <span class="slds-icon_container slds-icon-utility-check slds-current-color">
              <!-- <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
              </svg> -->
              <lightning:icon iconName="utility:check" size="x-small"/>
            </span>
          </span>
          <span class="slds-media__body">
            <span class="slds-listbox__option-text slds-listbox__option-text_entity custom-list-view-option-text-span">My Test List 1</span>
          </span>
        </div>
      </li>
      <li role="presentation" class="slds-listbox__item">
        <div id="option2" class="slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">
          <span class="slds-media__figure slds-listbox__option-icon">
            <span class="slds-icon_container slds-icon-standard-account">
              <!-- <svg class="slds-icon slds-icon_small" aria-hidden="true">
                <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#account"></use>
              </svg> -->
            </span>
          </span>
          <span class="slds-media__body">
            <span class="slds-listbox__option-text slds-listbox__option-text_entity custom-list-view-option-text-span">My Test List 2</span>
            <!-- <span class="slds-listbox__option-meta slds-listbox__option-meta_entity">Account • Durham, NC</span> -->
          </span>
        </div>
      </li>
    </ul>
  </div>

</aura:component>

And then I just a CSS

.THIS .custom-list-views {
opacity: 1;
display: block; 
z-index: 9001;
position: absolute !important; 
left: 258px !important;
top: 57px !important; 
visibility: visible; 
width: 400px !important;     

}

2
  • Can you share the code that you have tried? Commented Dec 16, 2022 at 23:47
  • I updated my post with the code snippet I'm using.
    – jojopogi
    Commented Dec 17, 2022 at 0:59

1 Answer 1

0

I figured it out! We don't need the custom css custom-list-views. I enclosed the listbox inside the div with the slds-dropdown-trigger and controlling the showing and hiding of the list items via slds-is-open worked like a charm!

<div class="slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open">
  ...
   <div id="listbox-id-3" class="slds-dropdown slds-dropdown_length-with-icon-7 slds-dropdown_fluid custom-list-views" role="listbox">

   ....
   </div>
</div>

You must log in to answer this question.

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