Position of popup for multicolumn combobox is not aligned with the control when filtering

[Bill Buklis]

When filtering, the displayed popup for a multicolumn combobox does not align with the control. This especially happens when the popup is placed above the combobox. It looks like the top of the popup is in the same position as if the full popup height is used when all rows are available. But, if fewer rows are in the filter then the actual height of the popup is reduced so that the bottom of the popup is much higher than the combobox control. Here is an example picture of what I mean.

There are other inconsistencies as well. Using this sample data, typing "r" gets you a full popup above the control. In this example, the combobox is at the bottom of the window so there isn't room below to display it. There are enough rows in the sample with "r" for this. Then typing "o" to make "ro" for the filter gets you the effect seen below. Then hitting backspace to go back to "r" gets the full set of rows with r, but places the popup below the control even though there isn't room. Typing "o" again, puts the popup back above the control in the same way as the picture.

[Kundurthi Naga Siddartha Kundurthi Vennela Prasad]

Hi Bill Buklis,

Based on the details you shared, we have created a sample with the MultiColumn ComboBox positioned at the bottom of the window with employee data containing multiple entries and tested the reported scenario, and in our testing, everything works as expected.

Validated Scenarios:

• MultiColumn ComboBox positioned at the end of the page with limited vertical space below to force popup positioning above the control.
• MultiColumn ComboBox displays all employee records with proper column alignment (Code, Full Name, Start Date, End Date).
• Filtering with "r" returns full result set and popup positions above the control with adequate height.
• Filtering with "ro" reduces result set and popup height adjusts dynamically to accommodate fewer rows.
• Backspace navigation from "ro" to "r" returns full dataset and popup repositions correctly.
• Re-applying filter "o" after backspace consistently displays reduced dataset with stable positioning.
• PopupHeight (200px) and PopupWidth (400px) parameters control display dimensions as configured.
• Value binding successfully captures selected employee data and updates the "Current Selection" display.
• AllowFiltering parameter enables dynamic filtering and responsive result set updates.
• Popup without explicitly set PopupHeight and PopupWidth parameters renders with auto-calculated dimensions and maintains proper alignment with the control.

For your reference, we have included the sample along with a GIF demonstration below:

Gif:

Sample: https://blazorplayground.syncfusion.com/embed/VDhHZKMBItwJkvfR?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

In order to assist us in identifying the problem and providing a better solution, we kindly request that you share the additional details mentioned below:

• Are you experiencing this issue on a specific platform, or does it occur across all platforms (e.g., Windows, macOS, Android, iPadOS, iOS)?
• Are you facing the issue only when placing the MultiColumn ComboBox inside a Grid or other components?
• Does the issue persist when using the latest version (32.2.9)?
• Please share a runnable sample that demonstrates the issue you are experiencing. You may also modify the previously shared sample to reflect your specific scenario. This will help us understand how the component is integrated and handled in your project.
• Issue replication steps.
• A video illustrating the issue.

Your inputs will greatly help us narrow down the cause and provide a prompt resolution.

[Bill Buklis]

I've included two html files in the attached zip file. Both are the same except one is using bootstrap 3 and the other is bootstrap 5. Both of these exhibit the same behavior. The only modification you may need is to change the location of the syncfusion files. In this example, they are in "/assets/syncfusion/dist".

I'm using version 32.2.3. At least that's what the syncfusion control panel says. It also says there are no updates available when I click on "Check for Updates".

Attachment: multicolissuebs3_6684340b.zip

[Bill Buklis]

Here is a video of the provided example.

Attachment: Multicolumn_combobox_issue_8501db91.zip

I tested this on Windows in both Edge and Chrome.

[UdhayaKumar Duraisamy]

We appreciate the detailed reproduction steps and the video you shared — they were very helpful in understanding the reported behavior.

We have attempted to replicate the popup alignment issue with the Syncfusion MultiColumn ComboBox during filtering using version 32.2.3 across multiple screen sizes.

Based on our testing, the behavior appears to function as expected in our environment. For reference, we have attached a GIF demonstrating this.

Upon reviewing the sample files you provided, we noticed that both Material and Bootstrap themes are being referenced simultaneously within the application. Loading multiple Syncfusion themes concurrently can cause unexpected rendering and layout issues, including popup misalignment. It is strongly recommended to include only one theme that aligns with your project requirements.

We suggest the following steps to help isolate the issue:

1. Remove either the Material or Bootstrap stylesheet from your application, retaining only the one relevant to your project.

2. Upgrade to version 32.2.9, which includes several fixes.

3. Retest the filtering behavior after applying both changes and let us know if the misalignment persists.

If the issue continues after these steps, please share an updated sample so we can investigate further.

[Bill Buklis]

I upgraded the Syncfusion files to version 33.1.44.

I removed the material.css link. That improved the general styling of the control.

However, the problem persists. Your gif file does not show the proper test. Only typing "r" does not filter the control enough to show the problem. Type "r" and then "o" for a filter of "ro". This shows the problem. It also only occurs if the popup is placed above the control. When it's below the control, it displays properly.

[Mallesh Ravi Chandran]

We have considered the reported issue " MultiColumn ComboBox shows a gap between the input and popup when the popup is positioned above after filtering " as a bug from our end and the fix for the issue will be included in our upcoming weekly release, which is expected to be rolled out on first week of April , 2026.

 

Now you can track the status of the reported issue through the feedback below,

https://www.syncfusion.com/feedback/73312/multicolumn-combobox-shows-a-gap-between-the-input-and-popup-when-the-popup-is
​  

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

[Mallesh Ravi Chandran]

We have included the fix for the issue "MultiColumn ComboBox shows a gap between the input and popup when the popup is positioned above after filtering " with our release version 33.1.49v . So please upgrade your package to the latest to resolve the issue from your end.

Sample :https://stackblitz.com/edit/9attpzab-njbgqmbh?file=index.html

Root Cause: The popup position was recalculated before the input element had completed its layout update during filtering, leading to incorrect anchoring when the popup flipped above the input. Now , the popup position refresh has been deferred until after the browser completes the input layout update, ensuring the popup aligns correctly with the input element.