[SOLVED] Office taskpane not displaying properly

Office taskpane not displaying properly

so I was trying to run my custom Officejs add-in after a while and noted that the certificates had expired, and the app wasn't running. So I did a npx office-addin-dev-certs install which resolved, however now I notice that the Taskpane is no longer displaying properly (with a dark background, and distorted when dragged). Please see screenshot.

When I open the app and load the https://localhost:3000 in the browser it loads up properly without this issue. I also tried clearing the cache for Office multiple times but didn't fix it. I have not made any edits to the code so not sure how this occurred.

Solution

Yeah I had the same issue the other day. My solution was to set the background color on the html- and body-tag. Current state of office add-ins is horrible.

<!doctype html>
<html lang="en" class="antialiased h-full bg-white">

<head>
  <meta charset="utf-8">
  <title>LptWord</title>
  <base href="/">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body class="antialiased relative h-full bg-white">
  <taskpane-root></taskpane-root>
</body>

</html>