Combobox and Datepicker not displaying over panel

[BenPitcairn]

I am using the `combobox` and `input-date-picker` inside a panel. However the dropdown/popups don't display over the panel, they display inside it causing a scrollbar to be active on the panel and the date-picker/combo options not to be visible. This is not the behaviour I was expecting, when using a `select` the dropdown behaves as expected and is displayed on top of everythin else.

Am I using the componenets in the intended way?

Minimal example:

<calcite-panel heading="Heading" dismissible>
    <calcite-input-date-picker locale="en-gb"></calcite-input-date-picker>
    <calcite-combobox selection-mode="single" label="Combobox">
        {% for item in item_list %}
            <calcite-combobox-item text-label="{{ item.label }}" value="{{ item.value }}"></calcite-combobox-item>
        {% endfor %}
    </calcite-combobox>
    <calcite-button slot="footer-actions">Save</calcite-button>
</calcite-panel>

[KittyHurley · Accepted solution]

Hi @BenPitcairn, great question!

When using a fixed container, like panel to contain components, you could use the "overlay-positioning" attribute to position the components, in this case to the input-date-picker and combobox.

If you have a large number of combobox items, you could also use the "max-items" attribute that adds a scrollbar to the combobox items beyond the number specified.

For instance:

<calcite-panel heading="Heading" dismissible>
    <calcite-input-date-picker locale="en-gb" overlay-positioning="fixed"></calcite-input-date-picker>
    <calcite-combobox selection-mode="single" label="Combobox" overlay-positioning="fixed" max-items="10">
        {% for item in item_list %}
            <calcite-combobox-item text-label="{{ item.label }}" value="{{ item.value }}"></calcite-combobox-item>
        {% endfor %}
    </calcite-combobox>
    <calcite-button slot="footer-actions">Save</calcite-button>
</calcite-panel>

[BenPitcairn]

Thanks,

That worked. However for the combobox, it now displays at full-width - ie the dropdown covers the full width of the screen, which looks very odd. Is there an auto width  option or something?

[KittyHurley]

We don't have a property at this time. You could use dropdown if you are looking for a smaller footprint in the panel, which also has the "overlay-positioning" and "max-items" attributes.

[BenPitcairn]

Thanks -  I chose the combobox for the search functionality, it saved me from implimenting it myself.