Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CanvasHeight set to 100% seems to collapse clover-viewer-content when below 767px window width #214

Open
tarjelavik opened this issue May 28, 2024 · 0 comments

Comments

@tarjelavik
Copy link

I am checking Clover on a new site. I can't seem to get responsive height to work properly. The viewer below collapses the content-viewer-content div when the width is below 767px.

 <div className='w-full h-[500px] md:h-[700px] lg:h-[70vh] relative dark:nx-bg-primary-300/10 bg-slate-200 z-0'>
    <Viewer
      iiifContent={manifestId}
      options={{
        canvasHeight: '100%',
        informationPanel: {
          open: false
        },
        ...config // Override default options
      }}
    />
</div>

If canvasHeight is set to a fixed value it works fine.

This happens with the demo manifest (https://api.dc.library.northwestern.edu/api/v2/works/71153379-4283-43be-8b0f-4e7e3bfda275?as=iiif) and my less than perfect manifests (https://api-ub.vercel.app/items/ubb-diplom-0080/manifest).

Inline style or Tailwindcss results in the same behaviour.

Handeling an interactive component on mobile is tricky i guess, but it seems like the Clover Viewer should handle it a bit better :-)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant