Combobox options overflow is set to visible but is cut off

Question

I have a datatable and within this datatable I have a combobox with three different options. When I choose the combobox, the options do not overflow the combobox, but stay only within the area of the rows.

I tried using overflow: visible; on the div of the combobox and the div of the datatable.

Datatable:

    <div class="slds-table_header-fixed_container" style="height: 1000px; overflow: visible;">
    <c-custom-lightning-datatable
            key-field="id"
            data={data}
            columns={columns}
            hide-checkbox-column
            >
    </c-custom-lightning-datatable>
</div>  

combobox:

  <div class="slds-p-horizontal_medium  slds-scrollable" style="height:5rem;overflow: visible;">
     <lightning-combobox name="types" placeholder="asddssd" label="Type" value={value} options={TypeOptions} onchange={handleTypeChange} variant="label-hidden"> </lightning-combobox> 
</div>

I still can not reach the goal of having the values overflowing the whole thing. Could anyone give me a hint? I am a newbie at LWC.

Answer 1

lightning- namespace components are not very customizable, specially in LWC due to the nature of Shadow DOM - unless the component has a styling hook for what you are trying, there is nothing you can do to change the behavior. You are best using a custom component built using SLDS blueprints.