css conflict issue with angular ng-zorro-antd css framework

dineshpithiya-virtusa commented 2 months ago

I am using below version of angular, antd css and ngx-extended-pdf-viewer package.json file

"@angular/core": "^17.3.0",
"ng-zorro-antd": "^17.3.0",
"ngx-extended-pdf-viewer": "^19.7.1",

angular.json file

"assets": [
              "src/favicon.ico",
              "src/assets",
              {
                "glob": "**/*",
                "input": "node_modules/ngx-extended-pdf-viewer/assets/",
                "output": "/assets/"
              },
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
              "src/styles.css"
            ],

If I remove "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css", from angular.json file, then my text and add or edit image working fine but If I keep then add or edit image resize image to automatically and now allow to resize. it works like keyboard resize button stuck and continue pressed.

Basically two issues due conflict CSS with antd

text delete icon issue due to default button css font-size: inherit;
add or edit image feature completely stop. because after upload image not able to resize.

please help me to resolve this issue

Thanks

stephanrauh commented 2 months ago

I'm not sure if I got the problem. You've omitted a couple of words, so I have a hard time to read your issue. Here's what I understood:

There's a CSS incompatibility between ng-zorro-antd and my library. I didn't even know ng-zorro until a couple a minutes ago, so that's not suprising.
The incompatibility affects only two functions: the text editor and the "stamp image" tool.
The problem with the text editor is that the delete button isn't visible. This, in turn, is caused by a CSS rule font-size: inherit.
The "stamp image" tool works, but you can't resize the image, so it's useless.

Is this correct?

And can you send me screenshots and a more precise pointer to the offending CSS rule you've found?

Finally, can you send me a reproducer? I'm not familiar with ng-zorro, so I'm afraid trying to reproduce your issue takes many hours - and this is a leisure-time project, so I need your help!

Thanks in advance, Stephan

dineshpithiya commented 2 months ago

Thank you @stephanrauh for the very good support.

Yes - I confirmed your understanding is correct.

Let me share with you screen shot and recorded video as well.

Edit or add Image

add or edit image

Add text

text

Issue recorded video

pdf-issue.webm

sample code

For the quick setup of sample code you can directly download below sample code which include sample angular setup with two library one your pdf and second css antd framework

download link

sample-ngx-extended-pdf.zip

Fill free to ask any question or suggestion

Note:- As per me this issue because of antd css. If we remove just one line from angular.json style section "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" Then pdf editor working fine. I tried to figure out issue as well but not succeed with image re-size issue

Thank you

stephanrauh commented 2 months ago

I can't reproduce the problem with the stamp editor. It works fine on my machine. However, the bugfix concerning the delete button is going to land soon with version 20.

dineshpithiya commented 2 months ago

@stephanrauh thank you for the debug but I don't know why in your system it's worked. I am using MAC book air and chrome browser. I think you are using windows. Because I notice when I run this sample after your comment into windows and seems it's worked without zoom issue. So added css of header and it's stop working in windows chrome as well.

I attached again same demo with added header module to re-produce issue

Sample code

zoom-in-issue-sample-ngx-extended-pdf.zip

stephanrauh commented 2 months ago

I'm using MacOS and Chrome, too. Did you update to version 20.0.0-alpha.0? It should solve at least one of the two bugs.

dineshpithiya-virtusa commented 2 months ago

I don't know exactly but will be look, in between have you tried this new sample code as well? about zoom issue during use header module. below sample code not working with in MAC or windows or ubuntu zoom-in-issue-sample-ngx-extended-pdf.zip

stephanrauh commented 2 months ago

Now I've been able to reproduce and see the bug. That's a funny bug! Granted, from your point of you, it's annoying, but I've never seen something like this. CSS causes the image to shrink - that's weird!

As a work-around, add these lines to your global styles.css file:

ngx-extended-pdf-viewer div.zoom,
ngx-extended-pdf-viewer div.zoom * {
  box-sizing: content-box ;
}

That solves the issue if your document doesn't have a text layer (or if you deactivate the text layer). I'm still trying to find out why the text layer appears below the canvas after activating the stamp editor.

stephanrauh commented 2 months ago

It seems the text layer issue is not caused by you. It seems to be an error introduced by pdf.js 4.1. It may take a while to find and fix it.

In the meantime, the work-around I've posted above fixes both issues in version 19.7.1.

dineshpithiya-virtusa commented 2 months ago

@stephanrauh Thanks a lot, image resize issue is resolve after your suggested css use. ngx-extended-pdf-viewer div.zoom, ngx-extended-pdf-viewer div.zoom * { box-sizing: content-box ; } To resolve text issue, I added below CSS and seems issue resolve. ngx-extended-pdf-viewer .editToolbar button, select { text-transform: none; font-size: initial; } I am good to close this issue if you wish.

stephanrauh commented 2 months ago

Your bug fix has landed with version 20.0.0-alpha.1. I've also found out why the text layer was messed up. It works now.

However, after activating ng-zorro, I noticed the text layer is a few pixels off. I'll keep it at the for the moment. If that's a problem for you, I can try to dig deeper. Or maybe I can talk you into it. This is an open-source project - so I invite everybody to add to it! :)

dineshpithiya-virtusa commented 2 months ago

Your bug fix has landed with version 20.0.0-alpha.1. I've also found out why the text layer was messed up. It works now.

However, after activating ng-zorro, I noticed the text layer is a few pixels off. I'll keep it at the for the moment. If that's a problem for you, I can try to dig deeper. Or maybe I can talk you into it. This is an open-source project - so I invite everybody to add to it! :) => Sure any time you can ping me. thanks for the contribution and quick reply.

stephanrauh / ngx-extended-pdf-viewer

css conflict issue with angular ng-zorro-antd css framework #2282

sample code