Unable to resize PDF if the parent div got resize

Bug Report or Feature Request (mark with an x)
- [ ] Regression (a behavior that used to work and stopped working in a new release)
- [ x ] Bug report -> please search issues before submitting
- [ ] Feature request
- [ ] Documentation issue or request

I am able to resize PDF on window resize but I am not able to resize pdf if the parent div of the pdf-viewer resize programatically. I have provided code below:

<pdf-viewer [src]="pdfSrc" [render-text]="true" [render-text-mode]="1" #pdf [original-size]="false" [autoresize]="true" style="display:block"></pdf-viewer>

1 possible answer(s) on “Unable to resize PDF if the parent div got resize

  1. I was facing the same issue. The correct workaround was in the CSS container.
    I had a view display flex with two children both set the flex property to 1.

    .container { 
       display: flex;
       flex-direction: column;
    
       child-1 { flex: 1; }
    
       child-1 { flex: 2; }
    }
    

    And I also wanted to use the view on portrait mode, so:

    @media screen and (orientation: landscape) {
       .container {
           flex-direction: row;
       }
    }
    

    And here is where the component was “failing” to resize. But the issue is on the CSS file as mentioned by the creator of flex-box.

    Solution

    You need to set the width property of the child elements to 0(zero), like so:

    .child {
       flex 1;
       width: 0;
    }
    

    I hope the solution fits you.