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

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>