Allow child to overflow into parent

Question

EDIT: resolved see code at the bottom, also changed some of the code in the rest of the post to reflect the changes....may not 100% work if you copy and paste it as i removed identifiable information.

I have a datatable that's embedded in another component which is resting on a lightning page. What i'm trying to figure out is how to get the picklist to overflow into the parent component / lightning page and not have a scroll bar for the datatable appear.

I've tried wrapping the child datatable in

<div class="slds-box" style="overflow: initial; z-index: 99;">

Which didn't work, and setting the entire parent component to overflow: initial as well which didn't work. It just gives me the scrollbar at the datatable level.

I've tried both at the parent container that contains the datatable, and at the combobox itself. Here's the combobox

<template>
        <div class="slds-box" style="overflow: initial; z-index: 99;">
        <lightning-combobox
                label={Name}
                placeholder={placeholder}
                value={value}
                onchange={handleSelect}
                options={pickVals}>
        </lightning-combobox>
    </div>
    </template>

The only place i haven't tried is at the extension component. But so far it seams it only will 'overflow' within the context of the datatable not the parent component or the flexipage itself....

edit requested code snippets extension js

import LightningDatatable from 'lightning/datatable';
import picklist from './selectDropdown.html';


export default class dataTable_ext extends LightningDatatable {
    
    static customTypes = { 
        picklist: {
            template: picklist,
            typeAttributes: ['label', 'placeholder', 'options', 'value', 'context','picklistname'],
        },
    };

}

my NEW extension html

    <template>
    <c-dynamic-Select-Dropdown record-id={value}
    label={typeAttributes.label} 
    value={typeAttributes.value}
    placeholder={typeAttributes.placeholder} 
    options={typeAttributes.options} 
    context={typeAttributes.context}
    picklistname={typeAttributes.picklistname}
    currentvalue={typeAttributes.currentvalue}>
    </c-dynamic-Select-Dropdown>
</template>

Then here's the data table JS, standard stuff but you can see the extension in the columns. All the other JS portions aren't really necessary to show since that's just backend logic and has nothing to do with HTML/CSS lack of overflow

    const COLS = [
    { label: 'Merchandise', fieldName: 'Signage__c', type: 'picklist', editable: true, wrapText: true, typeAttributes: { picklistname :'Signage__c', context: {fieldName: 'Id'},  placeholder: {fieldName: 'Signage__c'}}},
    { label: 'Stand', fieldName: 'Stands__c', type: 'picklist', editable: true, wrapText: true, typeAttributes: { picklistname :'Stands__c', context: {fieldName: 'Id'}, placeholder: {fieldName: 'Stands__c'}}},
    { label: 'Seats', fieldName: 'Seats__c', type: 'picklist', editable: true, wrapText: true, typeAttributes: { picklistname :'Seats__c', context: {fieldName: 'Id'}, placeholder: {fieldName: 'Seats__c'}} },
    { label: 'Notes', fieldName: 'Notes__c', editable: true },
    { type: 'button-icon', typeAttributes: {iconName: 'utility:delete' }}
];

export default class quoteLineItemsTable extends LightningElement {

The HTML

    <c-data-table_ext  
        key-field="Id"
        data={tableData}
        columns={columns}
        onpicklistchanged={picklistChanged}
        onvalueselect={handleSelection}
        oncellchange={handleCellChange}
        oncancel={handleCancel}
        onsave={handleSave}
        draft-values={draftValues}
        onrowaction={handleRecordDelete}
        show-row-number-column= false
        hide-checkbox-column
        column-widths-mode="auto">
</c-data-table_ext>

then the parent component is just a form but i have this just in a separate div

        <div class="slds-col slds-var-p-vertical_medium" >         
<c-quote-line-items-table record-id={recordId} ></c-quote-line-items-table>   
    </div>

edit: resolved and here's the new component....it plugged in perfectly to my existing extension just imported this new one

    import { LightningElement, api, wire,track } from 'lwc';
import { getObjectInfo,getPicklistValues } from 'lightning/uiObjectInfoApi';
import getConversionRecordTypeId from '@salesforce/apex/quoteLineItemConfig_ctl.getConversionRecordTypeId';


export default class dynamicSelectDropdown extends LightningElement {
    @api objectName = 'Theme_Conversion__c';
    @api recordTypeId;

    @api picklistname;
    @api placeholder;
    @api context;
    @api pickVals;
    @api value;

    @track fieldLabel;
    apiFieldName;

    @wire(getObjectInfo, { objectApiName: '$objectName' })
    getObjectData({ error, data }) {
        if (data) {
            this.apiFieldName = this.objectName + '.' + this.picklistname;
            this.fieldLabel = data.fields[this.picklistname].label; 
  
        } else if (error) {
            // Handle error
            console.log('Error --> '+ error);
        }
    }
    @wire(getConversionRecordTypeId, { recordId: '$context' })
    wiredRecord({ error, data }) {
        if(data){ 
        this.recordTypeId = data;
);    

        } else if (error) {
            this.error = error;
            console.log(' error with get record type  ' + JSON.stringify(error));
        }
    }

    @wire(getPicklistValues, { recordTypeId: '$recordTypeId', fieldApiName: '$apiFieldName' })
    getPicklistValues({ error, data }) {
        if (data) {
                   this.pickVals = data.values.map(plValue => {
                return {
                    label: plValue.label,
                    value: plValue.value
                };
                
            });
           
        } else if (error) {
            console.log('Error  on getting picklist values--> ' + error);

        }
    }
    
    get options() {
        if (this.pickVals) {
            return this.pickVals.map((vals) => {
                return {
                    ...vals,
                    selected:
                        vals.value === this.placeholder ? true : false
                };
            });
        }
        return [];
    }
    handleSelect(event) {

        this.value = event.target.value;

        this.dispatchEvent(new CustomEvent('picklistchanged', {
            composed: true,
            bubbles: true,
            cancelable: true,
            detail: {
                data: { context: this.context, value: this.value, picklistname: this.picklistname}
            }
        }));

    }
} 

html

<template>
    <div class ="slds-select" onchange={handleSelect}>
    <select class="slds-select" id="select-01">
     <template for:each={options} for:item="picklist">
        <option key={picklist.value} 
                value={picklist.label} 
                selected={picklist.selected} >
                {picklist.label}
            </option>
     </template>
    </select>
</div>
</template>

Answer 1

I faced this issue recently when using lightning-combobox in a modal, so I replaced lightning-combobox with standard HTML select tag, which overflows into the parent without giving a scrollbar.

<select class="slds-select" id="board-select" onchange={handleChange}>
     <template for:each={options} for:item="board">
           <option
                 key={board.value}
                 value={board.value}
                 selected={board.selected}
           >
               {board.label}
           </option>
    </template>
</select>  

But with this approach, we will have to take care of writing the logic to default the dropdown to a predefined value on page load by means of the selected attribute on the option tag.

get options() {
    if (this.boardsList) {
        return this.boardsList.map((board) => {
            return {
                ...board,
                selected:
                    board.value === this.selectedBoardId ? true : false
            };
        });
    }
    return [];
}