Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add class_name option for Models used in ModelForm #353

Open
ibe-314 opened this issue Sep 10, 2024 · 1 comment
Open

Add class_name option for Models used in ModelForm #353

ibe-314 opened this issue Sep 10, 2024 · 1 comment

Comments

@ibe-314
Copy link

ibe-314 commented Sep 10, 2024

Currently when using ModelForm every form field is put into a new row. Here is an example:

grafik

The form above is generated using FastUIs ModelForm with the following pydantic Model:

class ExampleModel(BaseModel):
    first_name: Optional[str] = Field(
        None, title='First Name'
    )
    family_name: Optional[str] = Field(
        None, title='Family Name'
    )
    birth_date: Optional[date] = Field(None, title='Birth Date')
    remark: Optional[str] = Field(None, title='Remark')
    info: Annotated[Optional[str], Textarea(rows=5)] = Field(None, description='Optional free text information about you.')
    repo: str = Field(json_schema_extra={'placeholder': '{org}/{repo}'}, title='GitHub repository')

I would like to allign mutliple fields in one row using Bootstraps row and column functionality. I was not able to do this using ModelForm, however I found a solution using the Form class from fastui.components.forms:

manuel_model = c.Form(
        form_fields=[
            FormFieldInput(
                name="first_name",
                title="First Name",
                class_name="+ col-sm-4",
            ),
            FormFieldInput(
                name="family_name",
                title="Family Name",
                class_name="+ col-sm-4",
            ),
            FormFieldInput(
                name="birth_date",
                title="Birth Date",
                html_type="date",
                class_name="+ col-sm-4",
            ),
            FormFieldInput(
                name="remark",
                title="Remark",
                class_name="+ col-sm-6",
            ),
            FormFieldTextarea(
                name="info",
                title="Info",
                class_name="+ col-sm-6",
            ),
            FormFieldInput(
                name="repo",
                title="GitHub repository",
                class_name="+ col-sm-12",
            )
        ],
        submit_url="/api/login",
        class_name="+ row",
    )

which results in

grafik

I looked into the code of ModelForm, where the model_json_schema_to_fields function renders the Pydantic Model. Is there currently some possiility to add class_name attributes to the ModelForm fields? Or some other possibility to get the second layout using the ModelForm class?

@samuelcolvin
Copy link
Member

ye we could allow a class name per field wrapper.

For my part, on the vast majority of fields where FastUI might realistically be used, I'm pretty happy with a single column of fields.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants