diegomura / diegomura/react-pdf
Unable to hide View component's children on overflow
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
Hello, I'm trying to implement the layout shown below on the left (Yoga) using `@react-pdf/renderer`. On the right you can see that I'm pretty far from reaching my goal.
I have a `View` that, as `children`, receives a list of `Text` components, which get shrunk instead of keeping their height and getting hidden when they overflow the container. In the screenshot above, what's happening is that each `Text` content overflows and overlaps onto the following `Text` block.
I set up [this REPL](https://react-pdf.org/repl?code=3187b0760ce02e004d09e01b02984605e18194a4e5600b6592803a6002764043299002806f00a06180236b801ac0130a40007005c3059b36d51004b00e6600249d00b6114407260c8c1d0aea00d2b099c7ac81015cc2f00c2211080a1a0310016006c0138019800e2f068cd9d81d7990280095a979a5ccd461d4015904003c022461a2210511a9e034bc51530dd288e408a03401d80019aa52d22400ad62a1a4bde16c75b42be2b4baf58a60017d074075a9a4c0c345c58cb9b8cc412c6cec1d9cbc37361a8242c323a362340099eb06d965a845e2928b02614b65ca34019812eb6fd304a3a2c1658fdfb630003bb497850020bcdea72308c8cc1648ccee2605858acb67b239e24e643b190bc2f35501c10a28531ea00230a4e07650470723c226ec2251189c5d4270f8481e4f788780130c310c0094006e66330c6d01800085e6fc21060604c1830008d2443f1b4c321460007c4aa300078006ad264102e0b8143a118081404148c8f960886bac62abd59ab010d0d007a5379b75cc5178b25b04e94026530a22b951e8d550c0fa18080006e61028802d982f14820c86d5ea0d6c1359a2d76e40da00da158758d239330b271829f4c513340d11a633f60b401f9e26ade284c0ea1828996c82f23778c3002eabbdd6a84f687dfeb2d064312f014ba52064ac675e87d7d08d01f2d5b2bb6cbc3be1430c8e3ccb2182fb3762d0cef60001554140002220300e6328dd21e45a9e25801404813a106e921a0002b50b201610348001795e558d4d53e83842e418009025aca3c33a707a41221a11946612b63d96614651545ee07abe7733186ab12f931cc4c05c7ee3c471546fa34636142f125afaa45f002208bc5fa484a10a529a8461584e1786d404730c47f132791c249662746f47b6bda49944096c659f0771ec5f12c6090e639fa739b67f1a27800db46965fa065c90a6faaa4a9c85a9987569a7e1aeae9245ca81519fc49961079258fec9140ba800a2600c0960c08813ed40c6a1015d40c0002cb50602aad4326a5501f00803018020328ec1502d7350023b9866808301702131520726896b5f7395ca398aab35ad320ca2083d79805aa6d22a6002df95f950e522c8cd695f61a087755e87955ab50d03aa2800863639513151720d3a1c8e61d530008c006db9414434c0f00c017220fb4aa0e150bc038a40c0002a980e55d83903e83703cd7280021da0896a65c395bd416c0315d1880c984052208d23000033ee5391a0e8da0ad6aaa83d52b51dff4c078c75d5540201a06ce25101a39c04310326281748d25d056f3301ad6114ca2f23b20005fb957cf63289301d05b500023cb2bc398143956cc439aefcbcd9c9464ac056d34d4b501506817c141d0c76a1e624dc019a5635050d658807dbfb6b8822363300855db702e420225a57a6392bbc832604e20677bbb2f20a1f9810cc02ec9b52f4ebf94b631c0b11e7dcf9899867f62259ac40ca313d2f1d5b467dd275f9b28d5795f9bdce031b9c283b94409ec2718b4848fd8303d38974ead5433f9805b4c05a88f2aa5ddb5c3835771ccad15e9383e1d32d01c5774ef403960f72007593350895e35d4152805c83c9b32fa6931d0c985fb9637e876bebd16b35006d91a819d64c0fd2e86d44ada0d0a876a083cb387d402df541a371803ccbba0f4464b5781443087ec60000310a0d200f81715e783672953002b5a000844abb45190f66e2a92610133e83575a5b15ec6c91a8045a851a435320ededdebe6500fc309b331816019a0f3246021e848011480d8daff2881408a84318c00da826b106275d799d28600114fa9842d4a11bd8c63c6894e812f73a81c2035f44c6d43a81652ae63a424b3c129860398d400f49503f2d4c1d269e8e0697ce39b44b1355a439d1a632da83981e64ed77a78dfcf8d2eb35540941a42e2300429930a4b000fc9685044a6311a09023652cdb2f30da9aded1c04c992c579742b07441faf77813bdbc64b386aa3041845c9d0163a396904035db9525a923caad0dfc034384e81511c12ea460c91d2ca8b562ac6dbd888de00012f0384d5eea4d819df472f9504258051462db150bf4e9532a253f4c9424b097f2f148410510a77110985380ea522ad42d2d50749e92e23f3e49bc8f96643b2a57e22f2915b01ca7946991512a059119551aa041de8357304d4babb54ea1357abf566a4344908d64e30112ba409a04ba78cd020734cd100ad96b536a6f7b8a08f6800d3638b4ea24c1a57543a8cbbaae5241e08a04f5b9abd77a9f5506fd49100c81883500141c1a434659e4516257d58690d4cab60b0de1bc0a4682ba786359638cb64130a044c499930a622369ada8668048822b7d56c10d96719600d39ba89e67cc65a0b6163c3c59d049611ad01cb675ccc95aab0ae1acb5832b35d6bf5b444367c34d9b5498fb5158db65051d3d63b54015c9386735e04bbdb683c1a418d6fa535ae58d7b699501c83b8c87c56bc3a476aad1c497c72cec54bfbaf34e52cc77675cef9ccaa636cd45da009770065d9da576ae93d51990c6e62c65af056e48ddbaa105addd5a566b35ecac000f72aa5cd798f07013c8f97a98073c400b6995cf39006554557b1c89adfdaf3b362f65eabd3d81352618bcabe8dc67bcbe3909dd6804fa2648cdfc60f521be5bcec76689a92a5fac1d611fcba061fca7fc004132e520272380ad95023a5c09c883dfd4af40e2ab72808b9a6d410450dc1f838d94356d5db28a76e03ffa48590de33b2f11442468b3947f2bc1cc34b9b36f635456b8c2e13c208523563023b22fee11b94a8188926c81244356918adb43c88014a31d9acb30c3abbbf06d10e1d9ab1fd1720857deb017ed84f89c65626ff6b1ef17121f0d8ad90e3c0f38d71da1dc6752f17d57c7c3009743827d0509b9558f848259136425f0c8b1313188ed96cc525a4ead0fd423406c92e2578407c98538a401d72a53ca479ea9b538da26d191009a7aa6adbdd423b4ee84dbba5ef5e93907798594bddd8668cc6b0a2a6454cd9733a94b53a18e6552699e6aa3382aead95a911ab1b863aab83198c82731fb9cbda7cb6e6acc9ee551e54440ba1700d79718e24fcb491857f2c28513f450580b7437ce29c20d0600500109fe221a41132927a0407a0083982b015f08620000) to explain what I tried so far. In the REPL, I set the container styling to `{ overflow: 'hidden' }`, but the children's overflowing text keeps overlapping and only the text overlapping to the green area gets hidden.
I would like to ask if I am overlooking some styling properties, and the solution is just in front of me, or the current behaviour is the expected one and there is no way to get the layout setup I'm trying to get.
I'm not sure if this is related to #2476.
Contributor guide
Assessment
This issue has not been assessed yet.