Select to view content in your preferred language

Combobox and Datepicker not displaying over panel

891
4
Jump to solution
07-08-2022 03:12 AM
Labels (1)
BenPitcairn
New Contributor II

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>

 

 

0 Kudos
1 Solution

Accepted Solutions
KittyHurley
Esri Contributor

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>

 

View solution in original post

4 Replies
KittyHurley
Esri Contributor

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
New Contributor II

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?

0 Kudos
KittyHurley
Esri Contributor

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.

0 Kudos
BenPitcairn
New Contributor II

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

0 Kudos