Comments (11)
can I work on this?
Contributions are welcome š. Are you familiar with Yoga's system for test fixtures.
from yoga.
Hello, I meet this exactly issue in my work.and Iām trying to fix it.
from yoga.
I encountered the same issue and had a doubt about why clamping to the min/max size specified on the container is needed for each line. So, I tried removing it for each line, and I add three test. Here is my submission #1493
from yoga.
can I work on this?
from yoga.
can I work on this?
Contributions are welcome š. Are you familiar with Yoga's system for test fixtures.
Yeah,
Okay thanks
from yoga.
@rasjonell hey can you try this?
const childHeightSum = node1.getComputedHeight() + node2.getComputedHeight();
const minHeight = container.getStyle().minHeight;
if (childHeightSum < minHeight) {
container.setHeight(minHeight);
} else {
container.setHeight(childHeightSum);
}
const height = container.getComputedHeight();
from yoga.
@rasjonell hey can you try this?
const childHeightSum = node1.getComputedHeight() + node2.getComputedHeight(); const minHeight = container.getStyle().minHeight; if (childHeightSum < minHeight) { container.setHeight(minHeight); } else { container.setHeight(childHeightSum); } const height = container.getComputedHeight();
This won't work. First I can't just rely on the sum of computed heights, as not all elements are necessarily wrapped, for example I may have a case like this:
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā Each box has size: 100 x 300
ā ā The sum of children heights would be: 1200
ā āāāāāāāā āāāāāāāā āāāāāāāā ā If it happens to be greater than the container's minHeight,
ā ā ā ā ā ā ā ā The final height would be 1200, instead 600
ā ā 1 ā ā 2 ā ā 3 ā ā
ā ā ā ā ā ā ā ā
ā āāāāāāāā āāāāāāāā āāāāāāāā ā
ā ā
ā ā
ā āāāāāāāā ā
ā ā ā ā
ā ā 4 ā ā
ā ā ā ā
ā āāāāāāāā ā
ā ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
If I collect the sum of heights it won't represent the height of all the rows. I would have to also make some calculations to understand how many rows are there and then calculate the sum, which can be really expensive, considering every layout change would make the same calculation twice(once on yoga's side, once on my own).
Another potential issue with this approach is that I would lose my minHeigt
option afterwards as we are setting container.setHeight()
from yoga.
can we follow the below approach?
- We'll iterate through the child nodes and determine if adding each child to the current row would exceed the
minHeight property of the container. - If the addition of a child to the current row would exceed minHeight, we start a new row.
- We keep track of the total height by summing up the heights of each row.
- After iterating through all child nodes, we calculate the final height of the container by considering the total height and
the minHeight property. - We then set the container's height to the calculated final height.
const childNodes = container.getChildNodes();
const childNodeCount = childNodes.length;
let currentRowHeight = 0;
let totalHeight = 0;
let numRows = 1;
for (let i = 0; i < childNodeCount; i++) {
const childNode = childNodes[i];
const childHeight = childNode.getComputedHeight();
if (currentRowHeight + childHeight <= minHeight) {
currentRowHeight += childHeight;
} else {
totalHeight += currentRowHeight;
currentRowHeight = childHeight;
numRows++;
}
}
totalHeight += currentRowHeight;
const finalHeight = Math.max(minHeight, totalHeight);
container.setHeight(finalHeight);
from yoga.
Yes, this workaround will fix it, however it's really expensive, considering my client would need to recalculate stuff that's already calculated on Yoga's side. Also I would lose the minHeight
config as we are setting the height
property.
from yoga.
@NextThread have you looked at fixing this inside of Yoga, instead of recommending workarounds?
from yoga.
@NextThread have you looked at fixing this inside of Yoga, instead of recommending workarounds?
No, I'm a beginner so, before that I was trying to share my approach,
should I try?
from yoga.
Related Issues (20)
- Absolute children do not respect padding of parent HOT 1
- [!] An error occurred while processing the post-install hook of the Podfile. HOT 1
- Can run on Mac Catalyst, but cannot be archive on Mac Catalyst HOT 10
- wasm-sync file index error in package.json HOT 2
- [website-next] Replace Yoga Node Editor with `@theme/CodeBlock` HOT 8
- Add `YGNodeStyleSet<Property>CSS` for CSS values as strings HOT 1
- Add `yoga::Style::resolve()` for ahead-of-time computed whole style HOT 2
- Try using explicit modulemap in CocoaPods build HOT 1
- Typo in recent module.modulemap change that breaks Swift PM-based builds HOT 1
- [JS] Move from embind to manual bindings HOT 1
- Flex shorthand in UseWebDefaults should set basis to 0 instead of auto HOT 3
- React Native iOS build failed HOT 1
- top position is wrong when previous item's height is 0.5, on 3x scale screen HOT 1
- API proposal to get the computed measure size of a node HOT 9
- Proposal: Integrate with google/oss-fuzz for continuous fuzz testing? HOT 8
- Can a Yoga Node have multiple owners? HOT 3
- [JS] Reduce WASM call overhead HOT 6
- Add App Privacy Manifest? HOT 1
- `flexBasis` doesn't recalculate when rotating the screen HOT 1
- __dirname is not defined in ES module scope HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
š Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ššš
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ā¤ļø Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from yoga.