1

So I have some Angular 7 code that makes extensive use of material dialogs, all works great when I view it as a webpage, but when I try to load it as a chrome extension, everything but the dialogs render correctly. When a dialog gets opened, the whole extension window gets a small width. I should note that the dialog does appear, everything just gets so small it isnt useable at all.

I have tried to replicate this behaviour when viewing the webpage in a small window, both with and without the responsive settings from chrome.

I think this might have something to do with permission, but I dont know what I should change. However I dont get any errors on the chrome://extension page, nor is anything logged to the console.

I have the following permissions and csp in my manifest.json

"permissions": [
    "activeTab"
  ],
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

How I use dialogs:

I inject MatDialog into the constructor of a service, create a function for that service that calls open(DialogComponent, {width: '25em', height: '25em', disableClose: true}) on the injected MatDialog. (I get the settings from another service) and I return the afterClosed().toPromise().

The DialogComponent gets a MatDialogRef<DialogComponent> injected in its contructor. Some of my dialogs call the dialogRef.close with parameters, some dont use parameters.

I added a github reproduction repository: https://github.com/erikknaake/dialog-reproduction/tree/master/dialog-reproduction

I should mention this happens in the default_popup: "browser_action": { "default_popup": "index.html" }

Chrome extension render:

enter image description here

Expected render:

enter image description here

Everything else just works as expected:

enter image description here

If you need futher information please ask.

erik321123
  • 35
  • 9
  • Without an [MCVE](/help/mcve) this is unlikely to get an answer. Assuming this is inside the browserAction (or pageAction) popup, make sure you've checked the [correct console](https://stackoverflow.com/a/38920982) (it's a separate window, not the same as web page) for errors. – wOxxOm Mar 24 '19 at 20:57
  • I have checked the separate windows console. I should mention this happens in the default_popup. ```"browser_action": { "default_popup": "index.html" }, ```. I will try to create a reproduction repo in the coming days – erik321123 Mar 25 '19 at 06:09
  • I edited the question by adding a reproduction repository – erik321123 Mar 25 '19 at 08:25
  • It sets `` style to `position: fixed;` via .cdk-global-scrollblock rule. Remove it and you're good. – wOxxOm Mar 25 '19 at 08:36
  • How would I remove that from my code, I dont want to edit the build files since I am still in development phase? – erik321123 Mar 25 '19 at 09:10
  • I have no idea so I can only assume it should be trivial. At the worst you can simply override the position via an inline style attribute or an additional CSS rule. – wOxxOm Mar 25 '19 at 09:11

1 Answers1

2

wOxxOms comment was right, after adding 

.cdk-global-scrollblock {
  position: relative !important;
}

To the styles.css the problem was fixed.

erik321123
  • 35
  • 9