diegomura / diegomura/react-pdf

Unable to hide View component's children on overflow

Open
#2,901 0 comments 2 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

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.

desired
actual

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.

image
image

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

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.