Can't get form to render as columns

[OdifYltsaeb]

I am trying to render 2 form fields side by side within a row. But Whatever i do the fields are rendered below eachtother with maxwidth.

<forms.RenderForm form={this.state.form}>
    <BootstrapForm>
        <Row>
            <Col>
                <Field name="category" />
            </Col>
        </Row>
        <Row>
            <Col>
                <Field name="name" />
            </Col>
        </Row>
        <Row>
            <Col>
                <Field name="description" />
            </Col>
        </Row>
        <Row autoColumns="sm">
            <Col sm="6">
                <Field name="location"/>
            </Col>
            <Col sm="6">
                <Field name="dueDate"/>
            </Col>
        </Row>
    </BootstrapForm>
</forms.RenderForm>

I have tried different ways to render those fields - like setting sm attribute to Field and removing Col wrapping element. Whatever - it does not work. And it only does work if i chose Container element instead of BootstrapForm.

Also - none of the Rows are rendered. All that i am seeing are div elements with class form-group. They arent nested in rows or columns

[insin]

<Field> generates column markup for you and needs to be nested directly under <Row>.

<Col> should only be needed if you have some columns you want to provide your own content in.

Removing all the <Col></Col> wrappers above should fix it.

You will probably need to move autoColumnsup to <Container> too if any of its rows and fields don't specify column widths or an autoColumns setting of their own.

[OdifYltsaeb]

I tried with like i posted. I tried without autocolumns and with fields nested in row with sm="6" attribute. Nothing worked until i changed wrapping element to Container instead of BootstrapForm

[OdifYltsaeb]

My current setup is:

<forms.RenderForm form={this.state.form}>
    <BootstrapForm>
        <Row>
            <Col>
                <Field name="category" />
            </Col>
        </Row>
        <Row>
            <Col>
                <Field name="name" />
            </Col>
        </Row>
        <Row>
            <Col>
                <Field name="description" />
            </Col>
        </Row>
        <Row>
            <Field name="location" sm="6"/>
            <Field name="dueDate" sm="6"/>
        </Row>
    </BootstrapForm>
</forms.RenderForm>

And it works as good (or bad) as previous codesnippet.

[insin]

Ah, I didn't spot that you were using BootstrapForm - that;s just for a plain old non-grid layout.

You need to use Container for a grid layour.

Try this:

<forms.RenderForm form={this.state.form}>
    <Container autoColumns="sm">
        <Row>
            <Field name="category" />
        </Row>
        <Row>
            <Field name="name" />
        </Row>
        <Row>
            <Field name="description" />
        </Row>
        <Row>
            <Field name="location"/>
            <Field name="dueDate"/>
        </Row>
    </Container>
</forms.RenderForm>

[OdifYltsaeb]

Can i get container to render as something else other than div with class container - i really do not need that class there :P

[OdifYltsaeb]

To be honest - this blows. I can't use this project with container and it does not work with BootstrapForm. It does not also look like i could extend your Contaner class as it relies on functions outside of its scope - and if i want to create my own Container class i would need to copy those functions too.