Width of input can't be set within a vstack.

[hjpr]

trafficstars

Setting width of a high level input component from within an vstack or other non radix container will not change width of input component. Changing the container to a flex allows input width to be 100% or set manually.

Specifics (please complete the following information):

• Python Version: 3.11
• Reflex Version: 0.4.4
• OS: Ubuntu 23.10

[wassafshahzad]

Could you share a reproducible example ?

[hjpr]

def example() -> rx.Component:
    return rx.vstack(
        rx.input(
            placeholder='Test Example',
            width='100%'
        )
    )

Above is an approximate of how I discovered it. If you wrap in flex instead, the width is set appropriately. The rendered code appears to not carry width as a CSS prop assigned to input using vstack, but does carry using flex container.

[wassafshahzad]

I looked into the issue using the following code

def index() -> rx.Component:
    return rx.vstack(
        rx.input(
            placeholder='Test Example',
            width='100%'
        )
    )

We get

While using the following code

def index() -> rx.Component:
    return rx.flex(
        rx.input(
            placeholder='Test Example',
            width='100%'
        )
    )

We get

I both cases the input tag does have the width property although The TextFieldRoot does not and it seems to be consistent in both flex and vstack.

[Lendemor]

vstack inherit from flex so it's expected to have same behaviour in both.

[spac3-monk3y]

Any workaround for this limitation?

[masenf]

The workaround is to set the width in units or to set the 100% width on the rx.input.root

rx.input.root(
    rx.input(),
    width="100%",
)

I hear this is one of things that is fixed in radix 3.0.0 which we'll be upgrading to soon.

[picklelo]

We've upgraded our input component, so this should work now with needing rx.input.root.