Placing Form Fields Side by Side

Is there a way to create form fields side by side? I have two text entries inside a form—one for first name and one for last name. I want them to be displayed next to each other. Is there a way to do this?

I have to add the following CSS to my container component, right?

".grid-container .oneToOne {
grid-template-columns: repeat(2, minmax(0px, 1fr));
}
"

You need to write the class name (grid-container) in the container component options section.
And the CSS code is written in the custom CSS section (Settings - Appearance).

I did this, but it is not working

image

image

You need to turn off the “use compiled CSS” button to apply CSS in your application. And turned on “preview custom css” to see the effect in the builder.

did that not working

May be the reason is that my container is “FORM CONTAINER” not simple “CONTAINER”

I did that
image

but I can’t see this layout option for my “FORM CONTAINER”

You wait, if your container is a form container.

/* Class name is: .formContainer */
.formContainer .full > div > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    column-gap: 10px;
    box-sizing: border-box;
}

#page-root .formContainer .single-column {
    --container-x-pad: 0;
    flex-direction: row; 
}

#page-root .formContainer > div > div > div > div {
    padding-left: 24px;
    flex-direction: row;     
    padding-right: 24px;
}

1 Like

Thank you very much it is working

but adding title give just change alignment of things like this

That’s a styling issue in your Title component and not a code issue.
Use a simple style for the Title component and don’t use images in limited space (side by side).
And you should add a spacer component second after the title component so that your first name column will be aligned with the second name column.

Thank you very much, but image is the requirement of title!

Since the form fields have been changed to side-by-side, your fields are now divided into two, making it no longer suitable to use the title component.

Another way to achieve the same result is by adding a regular container and placing the title component above it.

1 Like

Thank you for your support!

1 Like