Search code examples
cssfluent-uifluentui-react

How to place stack item at custom position in horizontal alignment in fluent ui

I want to place one stack item to the end and two stack items to the start in horizontally aligned stacks. enter image description here

I want to move the stack with the x icon to be at the end. This is the code snippet I used

<Stack styles={stackBodyStyle} horizontal tokens={stackToken} gap="14px">
        <Stack styles={{ root: { borderWidth: "1px", borderStyle: "solid"}}} verticalAlign="center">
            <FontIcon iconName='Info' style={{marginLeft: "18px"}}></FontIcon>
        </Stack >
        <Stack styles={{root:{borderWidth: "1px", borderStyle: "solid"}}} verticalAlign="center">
            <Text>{text}</Text>
        </Stack>
        <Stack onClick={onClose} styles={{root:{marginRight:"0", cursor:"pointer", borderWidth: "1px", borderStyle: "solid"}}} verticalAlign="center" horizontalAlign="end">
            <FontIcon iconName='Cancel' style={{marginRight : "18px"}}></FontIcon>
        </Stack>
    </Stack>

const stackBodyStyle: IStackStyles = {
    root: {
        borderWidth: "1px",
        borderStyle: "solid",
        minHeight: "48px",
        borderRadius: "3px",
        backgroundColor: "#EFF6FC",
        borderColor: "#C7E0F4",
    }
}

The middle stack can be resizable as the text might change.

Solution

  • This is my solution

            <Stack>
            <StackItem grow={1}>
                <Component 1/>
                <Component 2/>
            </StackItem>
            <ButtonsWhichWeWhantGoToEnd/>
        </Stack>