Input does not seem to follow "stretch" rule

[joshdholtz]

The Input element does not seem to follow the .childAlignment(.Stretch) property. I have attached a screenshot (I'm bad at designing but these colors are used for clarity of the issue 😉) and the example view code. I believe my code is right as the "Welcome!" Label and the bottom border views are stretched. BUT please let me know if it is something with just my code 😇

Screenshot (duh)

Code (even more duh)

return View(backgroundColor: UIColor.lightGrayColor())
    .justification(.FlexStart)
    .childAlignment(.Center)
    .direction(.Column)
    .children([

        View(backgroundColor: UIColor.orangeColor())
            .childAlignment(.Stretch)
            .direction(.Column)
            .width(300)
            .margin(Edges(left: 0, right: 0, bottom: 0, top: 80))
            .padding(Edges(left: 20, right: 20, bottom: 20, top: 20))
            .children([

                // Label
                { () -> Label in
                    let l = Label("Welcome!",
                        textColor: UIColor.darkGrayColor(),
                        font: UIFont.boldSystemFontOfSize(26))
                        .margin(Edges(left: 0, right: 0, bottom: 20, top: 0))
                    l.selfAlignment(.Center)
                    return l
                }(),

                // Input - Email
                Input(textColor: UIColor.blackColor(),
                    placeholder: "Email",
                    keyboardType: UIKeyboardType.EmailAddress,
                    returnKeyType: UIReturnKeyType.Next,
                    borderStyle: UITextBorderStyle.RoundedRect)
                    .margin(Edges(left: 0, right: 0, bottom: 0, top: 0)),

                // Border View
                View(backgroundColor: UIColor.darkGrayColor())
                    .height(1)
                    .margin(Edges(left: 0, right: 0, bottom: 20, top: 2)),

                // Input - Password
                Input(textColor: UIColor.blackColor(),
                    placeholder: "Password",
                    returnKeyType: UIReturnKeyType.Done,
                    secure: true),

                // Border View
                View(backgroundColor: UIColor.darkGrayColor())
                    .height(1)
                    .margin(Edges(left: 0, right: 0, bottom: 10, top: 2))

            ])

[joshaber]

(Sorry for taking so long to answer!)

Ah, yeah, so this is kinda interesting.

Input has a default frame:

Few.swift/Few-iOS/Input.swift

Line 56 in b53fbd1

super.init(frame: CGRect(x: 0, y: 0, width: 100, height: 23))

which means the layout algorithm will use that instead of taking into account stretchedness, etc. You can fix that by giving it an undefined width:

Input(...).width(Node.Undefined)

Then it'll stretch as you'd expect.

But also, be sure to update Few. I just fixed a bug (#80) that would cause the above fix to crash

[joshdholtz]

@joshaber I was about to say thanks for answering so quickly! I know how hard it is to stay on top of things 😇 But I will give that a shot! And is there any reason why Input has a default width of 100?

[joshaber]

And is there any reason why Input has a default width of 100?

Mostly because at the time it seemed like a good idea to have a reasonable default frame. Probably worth revisiting now.

[joshdholtz]

That is valid reasoning 👌 I just want to prevent others from getting hung up on the same thing like I did. Few is super easy to use and I don't want this to deter others from using it if they run into it 😊 I could work on a PR for it if you wouldn't mind.

[joshaber]

I could work on a PR for it if you wouldn't mind.

That'd be great! I wonder if we should still have a default but leave the width undefined?