zero max-height issue with toolbar popover menus

[joao-arau-symphony]

In our application all pop-over menus look like this :

The code we are using looks like this:

const renderToolbar = getRenderToolbar(isMobile);
	const defaultLayoutPluginInstance = defaultLayoutPlugin({
		sidebarTabs: () => [],
                renderToolbar,
	});

[...]

<div style={{ height: '500px', width: '100%' }}>
					{/* @ts-ignore */}
					<Viewer fileUrl={file} plugins={[defaultLayoutPluginInstance]} />
				</div>

This problem happens with and without using a custom toolbar. When investigating we found this problem with the max-height of the element. After manually disabling this value in chrome dev tools evrything shows correctly.

The webapp is built with create-react-app (react-scripts version "5.0.1")

[AchyuthRampalli]

@joao-arau-symphony , Please check the CSS of your parent components where your pdf-viewer has been embedded. mostly because of position : absolute or some other position property in your components you might face this issue.

[sereyn]

I have the same issue with 3.12.0 and I don't have any weird CSS, just using Material UI 5

[abhimskywalker]

@phuocng I believe the issue is here: https://github.com/react-pdf-viewer/react-pdf-viewer/blob/da204fec47b326bfe88ea2a4451511db1a531fdb/packages/core/src/portal/PopoverBody.tsx#L46C61-L46C61 document.body.clientHeight here gives value of zero. It should be probably window.innerHeight perhaps 🤔 . Should be a quick one line fix 🤞

Temporary solution in react for other folks:

useEffect(() => {
    // Function to modify the style of popovers
    const modifyPopoversStyle = () => {
      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
      const popovers = document.querySelectorAll(
        '[id^="rpv-core__popover-body-inner"]',
      ) as NodeListOf<HTMLElement>;
      popovers.forEach((popover) => {
        if (popover.style.maxHeight === "0px") {
          popover.style.maxHeight = "none"; // Unset the max-height
        }
      });
    };

    // Create a new MutationObserver instance
    const observer = new MutationObserver((mutations) => {
      mutations.forEach((mutation) => {
        if (mutation.addedNodes.length) {
          modifyPopoversStyle();
        }
      });
    });

    // Start observing the document body for added nodes
    observer.observe(document.body, { childList: true, subtree: true });

    // Cleanup function
    return () => observer.disconnect();
  }, []);

[Ljupcho-Petrushevski]

I also have this issue, not only for the more actions button in the right corner, but as well as for the search button on the far left, which practically makes those functions render obsolete.. Any updates on this? We're using @react-pdf-viewer/core": "^3.12.0", "@react-pdf-viewer/default-layout": "^3.12.0"