In the previous post I mentioned how we can fix a footer to the bottom of the viewport, but we have an issue where the width extends outside the width of the parent.<\/p>\n
NOTE: This post discusses a partial<\/em> solution to this issue. In that, if the browser window size changes this works, but if your viewport size changes, it doesn’t. So for example if you have a flyout Drawer component or the likes which takes up space on the page, then no window resize takes place, only a layout change takes place. If I resolve this I’ll update this post.<\/p>\n To solve this we’re going to create a ref<\/em> on our parent div and monitor it’s size changes and then apply them to our footer. <\/p>\n So assuming we’re using material-ui’s createStyle, with the following CSS (or use plain CSS or your preferred CSS library)<\/p>\n Here’s an abridged version of my code (using a React functional component)<\/p>\n So what we’re doing is getting a ref<\/em> to the parent div and storing the relativeWidth in the component’s state using useState (which we set up at the start of the function). Using useEffect, we create a listener to the window’s resize events and then update our state. Finally in the footer style we set the width explicitly using then relativeWidth that we stored.<\/p>\n Not only will this now display correctly relative to the parent div, but also resize relative to it as well.<\/p>\n These are early days for this code, but so far this looks to work a treat.<\/p>\n","protected":false},"excerpt":{"rendered":" In the previous post I mentioned how we can fix a footer to the bottom of the viewport, but we have an issue where the width extends outside the width of the parent. NOTE: This post discusses a partial solution to this issue. In that, if the browser window size changes this works, but if […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[43,243],"tags":[],"class_list":["post-8532","post","type-post","status-publish","format-standard","hentry","category-css","category-react"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=8532"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8532\/revisions"}],"predecessor-version":[{"id":8536,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8532\/revisions\/8536"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\r\nfooter: {\r\n position: "fixed",\r\n bottom: 0,\r\n marginBottom: "10px",\r\n textAlign: "left",\r\n},\r\n<\/pre>\n\r\nconst targetRef: any = useRef(null);\r\nconst [relativeWidth, setRelativeWidth] = useState(0);\r\n\r\nuseLayoutEffect(() => {\r\n function updateWidth() {\r\n if (targetRef != null && targetRef.current != null) {\r\n setRelativeWidth(targetRef.current.offsetWidth);\r\n }\r\n }\r\n\r\n window.addEventListener("resize", updateWidth);\r\n updateSize();\r\n return () => window.removeEventListener("resize", updateWidth);\r\n}, []);\r\n\r\nreturn (\r\n <div ref={targetRef}>\r\n {\/* our other elements *\/}\r\n <div className={classes.footer}\r\n style={{ width: relativeWidth }}>\r\n {\/* our footer elements *\/}\r\n <\/div>\r\n <\/div>\r\n);\r\n<\/pre>\n