1

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>

Example

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.

1 Answer 1

0

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.

2
  • Wow, do these things happen a lot? I mean does it happen often that a developer has to recreate a component using SLDS blueprints?
    – DevelBase2
    Feb 7, 2022 at 11:03
  • idk - I personally use blueprints a lot due to the many customizations we have to do - however, there is nothing wrong or weird with using blueprints. It's just regular web development. and once you have your own component, you can re-use it across multiple components/applications.
    – glls
    Feb 7, 2022 at 12:42

You must log in to answer this question.

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