Struggling to contain a gist within a div with scrollbars on my next.js site using gist-react. It seems like my CSS is being overridden when the gist loads from the underlying dependency. Is there a way to achieve this without modifying the dependency itself?
@/projects/[slug]/page.jsx
import styles from "./singleProject.module.css"
import { Gist } from 'gist-react';
...
<div className={styles.gistContainer}>
<Gist gistId="2223329" />
</div>
@/projects/[slug]/singleProject.module.css.gistContainer{
width: 45%;
height: 30%;
}
Noticing CSS overrides within the iframe body in the module.
/node_modules/gist-react/dist/Gist.jsReact.useEffect(() => {
if (!ref.current) return;
const $iframe = ref.current;
$iframe.srcdoc = `
<style>
*{box-sizing: border-box; overflow-y: hidden;}
</style>
<base target="_blank">
<script src="${url}"></script>`;
}, [url]);
return (
<iframe
ref={ref}
onLoad={() => {
if (!ref.current) return;
const $iframe = ref.current;
const innerHeight = $iframe.contentDocument?.body.scrollHeight;
$iframe.style.height = String(innerHeight) + 'px';
}}
style={{ border: 0, width: '100%' }}
id={iframeId}
/gt;
);
Multiple attempts at editing the dependency with no success in achieving the desired height or scrollbars.
React.useEffect():
- removed
overflow-y: hidden. That added unintended scrollbars.
return Statement:
Removed the height styling from the
$iframe, also from the$iframe.contentDocument?.bodyAdded maxHeight to the
$iframe, also the$iframe.contentDocument?.body
Trying
.gistContainer iframe{ width: 45%;height:30%;max-height:30%}Other unique references:
- how-to-change-height-of-a-dynamically-embedded-gist Tested & unsuccessful
- make-gist-embed-scrollable Tested & unsuccessful