Yoga not working with UIScrollView #737

New Issue

2018-03-20T02:55:19-07:00

100mango commented

2018-03-20 02:55:19 -07:00

(Migrated from github.com)

Report

I have searched existing issues and this is not a duplicate

Issues and Steps to Reproduce

setup a scrollview
add subview to scrollview
apply layout

Expected Behavior

scrollview can scroll with right contentsize

Actual Behavior

can't scroll as well as right subview size.

x7f95e107d400; frame = (0 0; 414 736); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x6000002510a0>; layer = <CALayer: 0x6000000318c0>; contentOffset: {0, -64}; contentSize: {0, 0}; adjustedContentInset: {64, 0, 0, 0}>

Link to Code

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        
        let root = self.view!
        root.backgroundColor = .white
        root.yoga.isEnabled = true
        
        let scrollview = UIScrollView()
        scrollview.backgroundColor = .red
        scrollview.yoga.isEnabled = true
        scrollview.yoga.overflow = .scroll
        scrollview.yoga.paddingVertical = 10
        scrollview.yoga.flexDirection = .column
        scrollview.yoga.alignItems = .center
        
        root.addSubview(scrollview)
        
        for _ in 0...20 {
            let view = UIView()
            view.backgroundColor = .yellow
            view.yoga.isEnabled = true
            view.yoga.width = 80
            view.yoga.height  = 80
            scrollview.addSubview(view)
        }
 
        self.view.yoga.applyLayout()
    }

# Report - [x] I have searched [existing issues](https://github.com/facebook/yoga/issues) and this is not a duplicate # Issues and Steps to Reproduce 1. setup a scrollview 2. add subview to scrollview 3. apply layout # Expected Behavior scrollview can scroll with right contentsize # Actual Behavior can't scroll as well as right subview size. x7f95e107d400; frame = (0 0; 414 736); clipsToBounds = YES; gestureRecognizers = <NSArray: 0x6000002510a0>; layer = <CALayer: 0x6000000318c0>; contentOffset: {0, -64}; contentSize: {0, 0}; adjustedContentInset: {64, 0, 0, 0}> # Link to Code ~~~swift override func viewDidLoad() { super.viewDidLoad() view.backgroundColor = UIColor.white let root = self.view! root.backgroundColor = .white root.yoga.isEnabled = true let scrollview = UIScrollView() scrollview.backgroundColor = .red scrollview.yoga.isEnabled = true scrollview.yoga.overflow = .scroll scrollview.yoga.paddingVertical = 10 scrollview.yoga.flexDirection = .column scrollview.yoga.alignItems = .center root.addSubview(scrollview) for _ in 0...20 { let view = UIView() view.backgroundColor = .yellow view.yoga.isEnabled = true view.yoga.width = 80 view.yoga.height = 80 scrollview.addSubview(view) } self.view.yoga.applyLayout() } ~~~ ![image](https://user-images.githubusercontent.com/5073511/37647695-d355456e-2c67-11e8-872a-4979726b12f7.png)

👍 2

LeoSchleicher commented

2018-03-22 02:52:16 -07:00

(Migrated from github.com)

Better after applyLayout() set contentSize property of UIScrollview to Scrollable size.

koenpunt commented

2018-08-25 10:55:06 -07:00

(Migrated from github.com)

Better after applyLayout() set contentSize property of UIScrollview to Scrollable size.

That's obviously a workaround.

But according to the tests it should work, but maybe the tests do not cover all cases..

> Better after applyLayout() set contentSize property of UIScrollview to Scrollable size. That's obviously a workaround. But [according to the tests](https://github.com/facebook/yoga/blob/46c96ee2cbc6260a1ef9398dd750973e427b9984/csharp/iOS/Facebook.YogaKit.iOS.Tests/YogaKitNativeTest.cs) it should work, but maybe the tests do not cover all cases..

xrom888 commented

2018-09-06 09:23:11 -07:00

(Migrated from github.com)

Set height: auto for inner view before call layoutIfNeeded. Why?
Ok when UIScrollView will layout innerView it will set it's YogaNode height from auto to exact value, so the innerView will layout second time with exact height and all it's children will be placed inside rect with that height.

Workaround:

Inherit UIScrollView.
Override method layoutIfNeeded:

- (void)layoutIfNeeded {
    [innerView configureLayoutWithBlock:^(YGLayout *layout) {
        layout.height = YGValueAuto;
    }];
    [super layoutIfNeeded];
}

Set height: auto for inner view before call layoutIfNeeded. Why? Ok when UIScrollView will layout innerView it will set it's YogaNode height from auto to exact value, so the innerView will layout second time with exact height and all it's children will be placed inside rect with that height. Workaround: 1. Inherit UIScrollView. 2. Override method layoutIfNeeded: ``` - (void)layoutIfNeeded { [innerView configureLayoutWithBlock:^(YGLayout *layout) { layout.height = YGValueAuto; }]; [super layoutIfNeeded]; } ```

100mango commented

2020-07-30 00:36:17 -07:00

(Migrated from github.com)

@xrom888 Would you mind giving more detail about the layout process in yoga, What is code in yoga imply " UIScrollView will layout innerView it will set it's YogaNode height from auto to exact value, so the innerView will layout second time with exact height and all it's children will be placed inside rect with that height."

mzF414 commented

2021-05-16 20:11:29 -07:00

(Migrated from github.com)

@koenpunt I found it was a C# test case , didn't work on swift

NickGerleman commented

2023-06-13 08:05:56 -07:00

(Migrated from github.com)

We are deprecating YogaKit as part of the Yoga 2.0 release. We are still going to release a new revision based on the current state of the repo, but won't be accepting new contributions, since we are going to be removing it from the repo after.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#737