0

I've created a lightning component which has a menu and this is how it opens:

enter image description here

enter image description here

<table class="slds-table slds-table_bordered selected-apps-table slds-table_fixed-layout">
                                <thead>
                                    <th class="slds-text-title_caps" style="width: 25%;">App</th>
                                    <th class="slds-text-title_caps">Category</th>
                                    <th class="slds-text-title_caps">Rating</th>
                                    <th class="slds-text-title_caps">Status Demand</th>
                                    <th class="slds-text-title_caps">Status Supply</th>
                                    <th class="slds-text-title_caps" style="width: 5%;"></th>
                                </thead>
                                <tbody>
                                    <aura:iteration items="{!dev.selectedApps}" var="app">
                                        <tr>
                                            <td class="slds-truncate"><img src="{!app.icon}" class="app-icon"/><span class="app-name"><a href="#" target="_blank">{!app.name}</a></span></td>
                                            <td class="slds-truncate">{!app.category}</td>
                                            <td class="slds-truncate">
                                                <aura:iteration start="0" end="{!app.rating}" items="1,2,3,4,5" var="index">
                                                    <lightning:icon iconName="utility:favorite" alternativeText="star" size="x-small">
                                                    </lightning:icon>
                                                </aura:iteration>
                                            </td>
                                            <td class="slds-truncate">{!app.demand_status}</td>
                                            <td class="slds-truncate">{!app.supply_status}</td>
                                            <td>
                                                <lightning:buttonMenu class="{!app.app_id}" onselect="{!c.itemSelectedOnSelectedApps}" aura:id="selected-apps-menu" alternativeText="Show menu" menuAlignment="auto" iconSize="x-small" variant="bare">
                                                    <aura:if isTrue="{!v.sObjectName != 'Account'}">
                                                        <lightning:menuItem value="removeFromSelected" label="Remove From Selected" prefixIconName="utility:clear"/>
                                                    </aura:if>
                                                    <lightning:menuItem value="createTask" label="Create Task" prefixIconName="utility:edit"/>
                                                    <aura:if isTrue="{!v.sObjectName != 'Lead'}">
                                                        <lightning:menuItem value="createWishlist" label="Create Wishlist" prefixIconName="utility:topic"/>
                                                    </aura:if>
                                                </lightning:buttonMenu>
                                            </td>
                                        </tr>
                                    </aura:iteration>
                                </tbody>
                            </table>

I tried to add z-index with !important but it doesn't work. I realized it's not possible to override css of standard components.

Is there any workaround ?

  • can you add code snippetes? – Pranay Jaiswal Apr 30 at 13:00
  • @PranayJaiswal added – osos9 May 1 at 7:47
0

Removing "slds-table_fixed-layout" from the table solved the problem.

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.