topic Re: Combobox and Datepicker not displaying over panel in Calcite Design System Questions

Combobox and Datepicker not displaying over panel

BenPitcairn — Fri, 08 Jul 2022 10:12:17 GMT

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>

Re: Combobox and Datepicker not displaying over panel

KittyHurley — Fri, 08 Jul 2022 14:12:25 GMT

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>

Re: Combobox and Datepicker not displaying over panel

BenPitcairn — Sun, 10 Jul 2022 12:36:19 GMT

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?

Re: Combobox and Datepicker not displaying over panel

KittyHurley — Mon, 11 Jul 2022 17:31:52 GMT

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.

Re: Combobox and Datepicker not displaying over panel

BenPitcairn — Mon, 11 Jul 2022 19:55:14 GMT

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