I'm creating custom table, row, and cell LWC components. The lightning-menu-item options display under other components no matter what I try. I've been adjusting the display and position values of all the components, and I haven't found a combination that works. It seems to be possible because the out of the box lightning-datatable row action menu will display over other components.
Does anyone now how to get the row action's button menu to display over other components?
testTables.html
<template><table class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_col-bordered slds-m-bottom_x-small" role="treegrid"><thead><tr class="slds-line-height_reset"><template for:each={table1FieldList} for:item="field"><th aria-label={field.label} aria-sort="none" class="slds-has-button-menu slds-is-sortable" key={field.property} scope="col"><a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="-1"><span class="slds-assistive-text">Sort by: </span><div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"><span class="slds-truncate" title={field.label}>{field.label}</span></div></a></th></template><th scope="col" style="width: 3.25rem"><div class="slds-truncate slds-assistive-text" title="Actions">Actions</div></th></tr></thead><tbody><template if:true={table1Data} for:each={table1Data} for:item="row"><c-test-row key={row.field1} field-list={table1FieldList} row-data={row}></c-test-row></template></tbody></table><table class="slds-table slds-table_bordered slds-table_edit slds-table_fixed-layout slds-table_resizable-cols slds-tree slds-table_tree slds-table_col-bordered" role="treegrid" aria-label="Child Relationships"><thead><tr class="slds-line-height_reset"><template for:each={table2FieldList} for:item="field"><th aria-label={field.label} aria-sort="none" class="slds-has-button-menu slds-is-sortable" key={field.property} scope="col"><a class="slds-th__action slds-text-link_reset" href="#" role="button" tabindex="-1"><span class="slds-assistive-text">Sort by: </span><div class="slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"><span class="slds-truncate" title={field.label}>{field.label}</span></div></a></th></template><th scope="col" style="width: 3.25rem"><div class="slds-truncate slds-assistive-text" title="Actions">Actions</div></th></tr></thead><tbody><template if:true={table2Data} for:each={table2Data} for:item="row"><c-test-row key={row.field1} field-list={table2FieldList} row-data={row}></c-test-row></template></tbody></table></template>testTables.css
:host { position: relative;}testTables.js
import { LightningElement, track } from "lwc";export default class TestTables extends LightningElement { @track table1Data = [{ field1: "value1a", field2: "value2a", field3: "value3a" }]; @track table2Data = [ { field1: "value1a", field2: "value2a", field3: "value3a", field4: "value4a" }, { field1: "value1b", field2: "value2b", field3: "value3b", field4: "value4b" }, { field1: "value1c", field2: "value2c", field3: "value3c", field4: "value4c" } ]; @track table1FieldList = [ { label: "field1", property: "field1" }, { label: "field2", property: "field2" }, { label: "field3", property: "field3" } ]; @track table2FieldList = [ { label: "field1", property: "field1" }, { label: "field2", property: "field2" }, { label: "field3", property: "field3" }, { label: "field4", property: "field4" } ];}testRow.html
<template><template if:true={fieldList}><tr><template iterator:it={fieldList}><td key={it.value.property}><span class="slds-grid slds-grid_align-spread"><div class="slds-truncate"><c-test-cell row-data={rowData} field={it.value}></c-test-cell></div></span></td></template><td role="gridcell" style="width: 3.25rem" aria-readonly="true" tabindex="0"><span class="slds-grid slds-align_absolute-center slds-grid_align-spread"><div><span><lightning-button-menu menu-alignment="auto" icon-size="x-small" variant="border-filled"><lightning-menu-item value="1" label="1"></lightning-menu-item><lightning-menu-item value="2" label="2"></lightning-menu-item><lightning-menu-item value="3" label="3"></lightning-menu-item><lightning-menu-item value="4" label="4"></lightning-menu-item><lightning-menu-item value="5" label="5"></lightning-menu-item></lightning-button-menu></span></div></span></td></tr></template></template>testRow.css
:host { display: contents;}testRow.js
import { LightningElement, api } from "lwc";export default class TestRow extends LightningElement { @api rowData; @api fieldList;}testCell.html
<template><lightning-formatted-text value={fieldValue}></lightning-formatted-text></template>testCell.js
import { LightningElement, api } from "lwc";export default class TestCell extends LightningElement { @api rowData; @api field; get fieldValue() { return this.rowData[this.field.property]; }}
