diegomura / diegomura/react-pdf

Text overlaps its container on multiple pages with fixed elements

Open
#1,439 5 comments 6 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**
Hi! I'm trying to make a layout with a fixed header and footer and content between them. If there are several pages text overlaps the footer but its container is not

**To Reproduce**
[See REPL](https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e619da74e5401a920c01dc634009e006c33600de7314400748c79230017c87091e2a4c0066a8300131950152d577d468016187958c009cf4c00f48646d426d26a0e619aa0ac2c50061c41946212d29e0046087cb6f62a111aba60de710922002a1828b0691981c53000a26030088df2193c5e309e30f23c3000b23c60c02e3c00349d580cb2203060208ca95e587330008ec8de333ca05e56edcce32b23f1b58c08c33350128c000e33eb58006e488f00b7bdcd302e487bf27c335d7908020136ea0c005ebd160c078d0243c9145e1038c3ced3e0f04ec54195cf808318c091c057a34cc3d500c16430745fc663b25958405e0d0c000aa605e88011bd2e8f06930460010e418f6daf41e9884b01da052478c20bc9b92180006796ac3f942d9bd0dc1071958101820483290f45b6381dd0b44005a90f3034612a0a29a2002b7551a60cf6f0157530bf800bf1a375e7cd7400ac0f0008f1e1f820bcbd0f43318ba7faeb1d462884098ef35482a04b10706bc9810574b35f6d848c07b665d5e4048c341c35c9814580ad1ccc878d374f08ba8f437b530e3297c921a5a7a1b5a0c9811613ea8b236a0eaa88c81085ec4214916c04817b9c64c4118c8cb697de13980c496320c369d937afb81e3b6d6f80d79ea9e3290a0a046a20fbca02c39999328c07792f469cb295e5269ef1e1b43580d59d611e05f5dc41061da189f14a59a5e820101165d0315a938078b56e9147445f04c2d01d7461c29583f9101c170d5b782ee2626e1e921719c8d855e00220881e11e85f434097a18957d8f180a079950f9d67100f64f1e366400312f0907945f1e92f353413000d68091613be5f9fe57c5a0b5805d0186c26148ded4bde3505405b914140905541b7b3f108030724ba294bc1f41d523281605d04014d049133240001b8a978d1a6d0ac2f0da0643a4a5e0a41acc057a2952166510090964693c7b23a714a2f92587032482316161e636b410aadd3d8601991046d517c1c8e8497198467cafe3c384ab090331bc160028834f184e2c651b442b04f1a0499611991b60074d485802051669c8bb8bc612a217430280e37540744b5e64dd407d3c37420cc1ab6f13687cb9043bac187854a6e4d92f26d84a416e46597153c95e84ca5c9156c0d560529816d680c5243a1033d92f1e37b2fcab0004bfac5620abb3f848a8b3e1b99a78b8a8fd760f01a6635a7443a66606218463d526041a62d4166bc567592aad8763d8bc03828e381ab382e793ae2e3c8e78de0f91a4b37922ab044df5884a1469612b8114d851197d1613b142af171909193496d8664a5a96b2e96b119664d90e45b1e4f94158551536ebba50b7a9c54555ccff2d58646cf50343d1340d335d19043d6b56d064d306b9d4c0dd0cee8caa22bf4f840d90a05931587968d66fd5dcc4d433015348aa2ccdb3418c13cc0b6438b0dacb0402b7b2581adea7ac0b266a712bc076c104ede51ec1afed077ee475e5c7504070441019ce76efcc091b18c2df2cc37560b70372d6130f63dc644dcf504af2c082bbdf0ac05c27c949b3df6de811d27f0cc20ec24808801024d58dbbe6825ad7a3c11c6581831e96e4facec9e22aacb9c62e17bcad474bb2612e445639b6a2b0256bd168898398b1e3621e538abb59cbc5f10090804241a8b05125c82484f6928d13ca5c452fa57a1dc352de0781691d2482c12190f0c654cbe63dc0d4759f255c1e9ec90c34670ca32b91111e5e60f1728be51a12c00a72982bb130a115848c535a095811c8d4a7c1d2bf20f0d95d12e5262054f5a48d2aa23e006c2aa1316aa8706adf59abd61c1ed54596d2c040d7abf5532434f008d4686342b24d5c4783979cd05a430902408f43c0d6af7722db53007102210d0e92063a6014eaad3001751935d700b75eebc66149b1986bd0da54c3eb1b6faea4fe953006bd081bb2506e0cc6943186c59047d02d8b31644a3472e8d52963386493244132260633a3930a254de50d3612f4d19bb10324f4d4bb34f89cdda0fe5e8bcd863e250a42c661cc48914425b83176acd65860438e3569a912569fc55ade35648435b814f88a33c55f1e86012132d53662423aa22f0d6c1aadb5c4f891d892324743ddad2464f49bdab27bc9c80c8076b241d3d0877aaeddc3aca48e4a8fc8f410434ae63c75f4fa90d05a14e180d382922e208b39da5ce515f386042ea424b82732e15d8315730ca08a30c606eb454b33756e4d32027718ef983691612ca09cb08c11ed587c5d606c4d8260b636c1d8bba2f791514578f435e1c4c73aa575d38663ef36587c970ae53eeb99085f6dc178810df5d277c5695847e5d19f8de37e0f93f98067c33d2090f3fe5f9005fe101619c058148150450ac15810842e8a1342282309a0ec2142f08c8422b83016d40213308877f0d51f8189fca629f0a8598da1dc4187f12428252c640312dfd24ae2d927c3b4008952c22348c06d2ba5bf8196b0d22ba12324a1647e2eb225b6430839751b025cafa6d1a15747791d94637249890abb5c282749db14a794924af631c665171768f28c264cb0a4a8f032abe32ab421aa480ea81a612212a1184e6d1133a9741891c97c60d5ea89371b249b5134cbb4d4c9f34aa92d3c61680a4292294844a6ed7290748e89d33af5290a5d1d52d21ebb4e7a5d245544cfa31147afd7224327a2036406e8c66ce09990c1ab434ba70cee023059c8d693a88c66b3e072d7c6ed1b64933d994c5faeb56dc504e7a33b92cd2e6346b96d1b9a1b7e88311e40b546c2cde6757167e2a5a3219672c8e319848c0b2e2ab7b810a5e142ed687af93a13b908b20722f364cad1462a8a58bed94922478a5d931425af90997b26464afda5288c81d3508a294412196bea65872a3ab2f541cbb51ca9e5c9d36a0a8b499c6d18ab6ea452574a8f45e95f6fa5d60aa43357762aabeb83d58d5abed0eaacc8c13b3fa8351b9fb85e53595947a5a89e2933c1dad9e0eb20b76675a455d50e3eda3937b7addebebda3ce1048b98f8ff33ea1beeb86c0151a8f09e07e5eab0226d7ec0c5357f17cab9cb366801bb8f343550185b9aa66b2930280e69c41dfca2e61741384cb536a22192a2bb6ca2181884c25211817b4368caac4874c311d6071878ee6193bd878944369664af0f92fc3949088f0222c446ea5ddba6c2eec59c776a0c2e3d2b55472c8d197bc635ec98b7bf45f907d8154c4d0c1bdd76a158cfd894ec5a52ee7fa72a32771c06ce681f03155b240498315748821cbc486daab9ebc687c4d0d3895877a0e1dfb787e2811dd64465d564d23b92b4c51c291b58a52e3a3fb420254ea9b520a4b18418d21a8dd3ba9c659b0217af09ba5f1be982760cbf7d6a26466bbc9360c51a4cd93d3214dcca277bae46a3188ea74da69bc688c74e563d314c6601ca33c728329cf33172d9959968367ccc3cfe61e45e48b373c17258c2696fb0fb6f99bee704155c305c169e285ad65f022ec29dc86c62d22b84f164f225bf341052ce2ee1e61f1565a3d396497e5df67d5fdb15ea5a56e95c1d4f8ca4f06ac5946381acb951397958d15add2885456945473835d8a17addd18b9bd0e5586c83146d9556b8d54a6c9b9ab9b5553dc01e6d16dd5196cfb98d5079878ab0c78ad52799b00c9ed5e791d48ec669270dd51882ec7ec3f0778f796ec0f81ed9704f9335cf95ece1445d8a16f8bec771e35bdc0d493401ca99535d349ecb353f1c1c50521ca29a1c60140961ca054b51b4e04fe991dab425ceb558031d1b4705889f04909084a88bb589d49dfb5c9da8542987529078869cc74231e9d584a7438599ce74d9c14917539d549b9d575d74244b748c885c54c0f4ac9c5c544cf49c9344af5dc86f4bc915d0c58291f46f19f4389d5ddf5ac4ba075c9107f5f5d9c50dd00c3c54dc389cdcfc4a0cf230bde0c205edcb1caa83a99dda255dd62530de51b0c364524fdca6871c4ec83d16843dc8c41128dd6841123c768ca463ce3c98cea41a4ae9082c0038cda533d3a473d78c261f8da207e90bdfe84bc20c24c418a4d2bc64ca28e4d61966494c1bc964d4d5655bcfe9dbd6613bd899aa9f4d7bd0cc8e41a94cd3f5ce5bc0d49f70a80fc0ca02a06a0820a12420e12440fc1113d309214c02c0501ac0b211407209c11b0340cc0401d010a1fc09121139206a0a137800410c0a12e80181981581d80081928c80c81349c00a00340960f81749300bc0f01940380cc00a9e41640000b8600001c8001e4201241790ac1a52db8200bc1800a53a525c0a00a006e0200252fc0fc0893581340f81b18ae18003413c8fc0200fc1811153e40ac0fc11e00011800198fc000134001f44a0001a5440000d840000038001d44011e1520590ac0dd3181bd2000340013878000105532340752cc1a52c80f41593d9333160022070060000195f134b2dc0ee8ad2960781300852381b41740a53853841491ca13525d26005d2733280f40db8dc12225b2c8000121db25012b3704001aca520001835d830ac16685b84a04006e0a5200159e724e1173972f8000085d01423373b73841520bcdbc13523729b5e407e01b1952db9fb2380a21be8a01872db3bc93b3bb25524e1c7268060d828ae1c013534015a1180c017b26009f3009892053df3381c732737406726014f3381772531573d72600b721723c0f730f2753e604f235dcf37612f2653af20896f26c15215a03007f2fb2db9f2028b5b3380c8bd48af26f2ef21c430058120af41733f32c8000095dc1800a00b806813487920bcf00a802a8d014a4021f3280000)

Screenshots

Page 1/3
Page 1/3
Page 2/3
Page 2/3
Page 3/3
Page 3/3

**Expected behavior**
The text node is not overlapping the footer and moves on the next page within its container

**Desktop:**
- OS: MacOS
- Browser: Chrome
- React-pdf version: both 1 & 2

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.