Column (and Stack) won't expand to it's content in 1.1.5/6

[rborn]

Without any code change from 1.1.4 to 1.1.5/6 it seems that Columns and Stack lost the ability to expand to its content in React-Native-Web.

This however works: <Column style={{ flex: 1 }}>

Code:

               <Column width={'content'} style={{ backgroundColor: 'pink', flex: 1 }}>
                     <Box alignX={'center'} alignSelf={'right'} flex={'fluid'}>
                        <Box
                            alignX={'center'}
                            alignY={'center'}
                            style={index <= currentPosition ? checkStyles.wrapperActive : checkStyles.wrapperInactive}
                        >
                            {index <= currentPosition && (
                                <Box alignX={'center'} alignY={'center'} style={checkStyles.currentContent}>
                                    <EmText color={colors.white}>
                                        {index < currentPosition || currentPosition === 2 ? (
                                            <Image
                                                source={images.webapp.onboardingCheck}
                                                style={checkStyles.checkImage}
                                            />
                                        ) : (
                                            index + 1
                                        )}
                                    </EmText>
                                </Box>
                            )}

                            {index > currentPosition && (
                                <EmText style={{ color: colors.neutral.c100 }}>{index + 1}</EmText>
                            )}
                        </Box>

                        {index < lastStep && (
                            <Box flex={'fluid'}>
                                {index <= currentPosition && <Box flex={'fluid'} style={checkStyles.ligatureActive} />}

                                {index >= currentPosition && (
                                    <Box flex={'fluid'} style={checkStyles.ligatureInactive} />
                                )}
                            </Box>
                        )}
                    </Box>
                </Column>

[mobily]

@rborn I'm looking at those screenshots, and I'm not sure what's the issue here? 😅 there weren't any changes in Columns/Stack in the last two versions v1.1.5/6, are you sure the problem isn't on your end? could you provide a basic example with this issue? :)

[rborn]

Hi,

So the first screenshot is how Column behaves with 1.1.5/6 without adding flex:1 and the second one is the correct behaviour.

Before it was working without the need to add flex in style ( not sure it was 1.1.4 or 0.9.6 though 😅

I will try to create a simpler example

[rborn]

@mobily ok, added the example : https://github.com/rborn/stacks_box_style_issues/blob/master/src/App.js#L32

set in package.json 0.9.4 - ✅

set in package.json 1.1.6 - 💥

change to <Column width={"content"} style={{ flex: 1 }}> and works again (with 1.1.6)

Thanks a lot 😻

[mobily]

since both implementations (v0.9.x and v1.x) are completely different, the column won't adjust its height against other columns automatically in v1.x :)

I have added the height prop (the responsive format) to the Column component, so you can use it instead of flex: 1.

there's an example in the docs as well: https://mobily.github.io/stacks/docs/components/column/#examples

and in your example, you may want to add height="fluid" to see how it's working: https://github.com/rborn/stacks_box_style_issues/blob/b35aae31c6a803c38892fdf89b99ea6ba53c1238/src/App.js#L32

🚢 shipped in v1.1.7!

[rborn]

@mobily thanks a lot, seems to work ( at least in the example) will report back in case I found anything 🥰