Outlook Add-In: The UI is different for web and Windows Desktop app

Question

I have created an add-in using Angular 8 which works fine in web browser, but on the desktop app. I am facing two issues:

1. There are some UI inconsistencies.

Here is a radio button on the web

Here is the same button on the desktop app

In HTML it is a span text. The number is dynamically updated through a variable.

2. The UI-less add-in stops working intermittently on the desktop app. I checked the logs and found this:

    23-12-2020 12:58:45 Monitorable Manifest Skipped unrecognized XML element for add-in ID: f7bad2f3-c4ca-492d-93cd-7828d5bd458f, Location: Element Namespace "http://schemas.microsoft.com/office/mailappversionoverrides": Element Name "Tooltip", Line=70, CharPosition=20 23-12-2020 12:58:45 Monitorable Manifest Skipped unrecognized XML element for add-in ID: f7bad2f3-c4ca-492d-93cd-7828d5bd458f, Location: Element Namespace "http://schemas.microsoft.com/office/mailappversionoverrides/1.1": Element Name "Tooltip", Line=183, CharPosition=22

The manifest in the project is validated through Yeoman tool, so I am confused why this is occurring.

Answer 1

Adding the following meta tag

meta name="format-detection" content="telephone=no"

to the head section worked for me. A more detailed answer can be found here: https://www.howtosolutions.net/2016/10/microsoft-edge-disabling-phone-number-detection-problem/