Outlook Office Add-in dropdown renders at top-left corner instead of near command button

Question

Outlook Office Add-in dropdown renders at top-left corner instead of near command button

Nguyễn Trọng Cảnh 5

I am developing an Outlook Office Add-in (Web Add-in using Office.js).

My add-in has two sub-features:

A Settings popup
A Task pane for processing email data

When the user clicks the Apps button inside an email, Outlook shows the list of installed add-ins. After selecting my add-in, a dropdown menu appears that allows the user to choose between:

Settings popup
Task pane

User's image

Main Issue

When the dropdown opens, it renders at the top-left corner of the screen instead of appearing near the add-in command button.

It looks like the dropdown loses its anchor reference or positioning context. User's image

Environment

New Outlook (Microsoft 365)
Office Add-in (manifest-based)
Office.js
Occurs when launched from the Apps button inside an email

There is another behavior that may be related to the same positioning problem:

If the user:

Clicks the Apps button (the add-in list opens),

Does not select any add-in,

Scrolls the mail list pane,

The add-in list panel immediately jumps to the top-left corner of the screen.

This appears to indicate that the Apps flyout loses its anchor reference when the mail list container reflows or scrolls.

This behavior occurs even before interacting with my add-in

User's image

Questions

Why would the dropdown render at top-left corner instead of anchoring to the add-in button?
Is this related to Outlook's rendering lifecycle or container positioning?
Is there a recommended way to properly anchor a dropdown UI inside an Outlook add-in command?
Should this scenario be implemented using a different command type (e.g., separate ribbon commands instead of a custom dropdown)?

Any technical guidance or best practice recommendations would be appreciated.

Thank you.

1 answer

Your answer

Answer 1

Jack-Bu 6,675 Microsoft External Staff Moderator

Hello Nguyễn Trọng Cảnh

Thank you for reaching out to Microsoft Q&A about the Outlook add-in behavior. The issue typically stems from fixed positioning that fails to adjust for scroll offsets or the limits of the add-in's iframe/webview container; Or outlook's habit of refreshing its UI during scroll events, such as in the email list, which can throw off the positioning references for elements attached to the document body. Here something you can do to fix this:

Use Native Manifest-Defined Menus for Simple Dropdowns: If your dropdown is static (a list of options triggering functions), define it in your add-in's manifest.xml. This lets Outlook handle positioning natively, avoiding custom JS/CSS issues.

<Control xsi:type="Menu" id="MyDropdown">
  <Label resid="MyDropdownLabel" />
  <Items>
    <Item id="Item1">
      <Label resid="Item1Label" />
      <Action xsi:type="ExecuteFunction">
        <FunctionName>myFunction1</FunctionName>
      </Action>
    </Item>
    <!-- Add more items -->
  </Items>
</Control>

Reference: https://learn.microsoft.com/en-us/office/dev/add-ins/design/add-in-commands

If you need a dynamic dropdown, calculate positions relative to the button and reposition on scroll.

function showDropdown(buttonElement) {
  const dropdown = document.getElementById('myDropdown');
  const rect = buttonElement.getBoundingClientRect();
  dropdown.style.position = 'absolute';
  dropdown.style.top = `${rect.bottom + window.scrollY}px`;
  dropdown.style.left = `${rect.left + window.scrollX}px`;
  dropdown.style.display = 'block';

  // Reposition on scroll
  const reposition = () => {
    const newRect = buttonElement.getBoundingClientRect();
    dropdown.style.top = `${newRect.bottom + window.scrollY}px`;
    dropdown.style.left = `${newRect.left + window.scrollX}px`;
  };
  window.addEventListener('scroll', reposition, true);
  // Clean up listener on close
}

Please test these in both Outlook web and desktop (ensure you're on the latest Microsoft 365 updates). Use browser dev tools (F12) to inspect coordinates post-scroll.

Hope this help.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Nguyễn Trọng Cảnh 5 Reputation points

2026-02-12T09:45:43.2+00:00
Thank you for the suggestion.

We have updated the add-in to use a manifest-defined <Control xsi:type="Menu"> instead of separate buttons, as recommended. However, the issue still persists.

When launching the add-in from the Apps button inside an read email, the command dropdown rendered by Outlook sometimes jumps to the top-left corner of the screen (0,0) instead of anchoring correctly to the command button.

This behavior is intermittent:

Sometimes the dropdown renders correctly.

Sometimes it renders at the top-left corner.

Importantly:

This can occur even without scrolling.

The issue happens immediately after clicking the Apps button on the ribbon.

It is not dependent on scroll events.

The issue occurs in both:

New Outlook (Microsoft 365 Desktop)

Outlook on the web (OWA)

Since the dropdown is now fully defined in the manifest using a native Menu control (with no custom HTML/CSS positioning logic), this suggests the issue is not related to custom JavaScript positioning.

For reference, here is the relevant part of the manifest currently in use:

<ExtensionPoint xsi:type="MessageReadCommandSurface"> <OfficeTab id="TabDefault"> <Group id="msgReadGroup"> <Label resid="GroupLabel" /> <Control xsi:type="Menu" id="TestMenu2"> <Label resid="residLabel3" /> <Supertip> <Title resid="residLabel" /> <Description resid="residToolTip" /> </Supertip> <Icon> <bt:Image size="16" resid="icon1_32x32" /> <bt:Image size="32" resid="icon1_32x32" /> <bt:Image size="80" resid="icon1_32x32" /> </Icon> <Items> <Item id="showGallery2"> <Label resid="residLabel3" /> <Action xsi:type="ShowTaskpane"> <SourceLocation resid="residUnitConverterUrl" /> </Action> </Item> <Item id="showGallery3"> <Label resid="residLabel5" /> <Action xsi:type="ExecuteFunction"> <FunctionName>getButton</FunctionName> </Action> </Item> </Items> </Control> </Group> </OfficeTab> </ExtensionPoint>

Could you please confirm whether this is a known intermittent issue with the Apps/command flyout rendering in New Outlook? Is there any official workaround to ensure stable anchoring behavior?

Thank you.
Jack-Bu 6,675 Reputation points Microsoft External Staff Moderator

2026-02-12T14:46:53.6933333+00:00
Hi Nguyễn

Thank you for the update, this is helpful to confirm you're using a native <Control xsi:type="Menu"> setup, which aligns with best practices for add-in commands. This isn't listed in the current "Known Issues" docs for Office add-ins or New Outlook fixes, which focus on other areas like add-in visibility, loading delays, or signature issues.

Unfortunately, there isn't an official workaround documented yet, as the issue stems from Outlook's internal flyout rendering rather than add-in code. However, here are some steps you can try to mitigate or gather more info:

Test Environment Variations:

Ensure Outlook is fully updated (check for Microsoft 365 updates via File > Account > Update Options).

Test in different browser modes for OWA (e.g., Edge vs. Chrome) or toggle hardware acceleration in desktop Outlook (File > Options > Advanced > Display > Disable hardware graphics acceleration).

If possible, test on a different machine or user profile to rule out local config conflicts.

Alternative UI Structures:

As a temporary pivot, consider using individual <Control xsi:type="Button"> elements in the manifest instead of a Menu dropdown. This avoids the flyout entirely, placing commands directly on the ribbon for more reliable anchoring.
<Control xsi:type="Button" id="MyButton1"> <Label resid="Button1Label" /> <Supertip> <Title resid="Button1Title" /> <Description resid="Button1Desc" /> </Supertip> <Icon> <bt:Image size="16" resid="icon1_16x16" /> <bt:Image size="32" resid="icon1_32x32" /> <bt:Image size="80" resid="icon1_80x80" /> </Icon> <Action xsi:type="ShowTaskpane"> <SourceLocation resid="residUnitConverterUrl" /> </Action> </Control> 
Reference: https://learn.microsoft.com/en-us/office/dev/add-ins/outlook/add-in-commands-for-outlook

If you haven't already, provide feedback directly in Outlook (via Help > Feedback) with repro steps and your manifest.

I can see you already reach out to GitHub community [OfficeDev/office-js #6505]. I also recommend you monitor over there for any updates.

Hope this help.

Share via

Outlook Office Add-in dropdown renders at top-left corner instead of near command button

Main Issue

Environment

Additional Observation (Possibly Related UI Issue)

1 answer

Your answer