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 :wink:) 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 :innocent:

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: https://github.com/joshaber/Few.swift/blob/b53fbd13026cf13327b2a66fc87f9189787656bb/Few-iOS/Input.swift#L56

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 :trollface:

[joshdholtz]

@joshaber I was about to say thanks for answering so quickly! I know how hard it is to stay on top of things :innocent: 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 :ok_hand: 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 :blush: 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?