Placing Form Fields Side by Side

[Namra]

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?

[Himaladin]

How to Maintain Container Layout on Mobile Devices

Seeing a desire to maintain a container layout that is not responsive to mobile devices, you can still achieve this through the “grid-template-columns” code. Here’s the code you need to add to your application’s custom CSS: Note: class name is grid-container .grid-container .oneToOne { grid-template-columns: repeat(2, minmax(0px, 1fr)); } [Screenshot 2024-05-03 at 08.21.54] [Screenshot 2024-05-03 at 07.52.33]

[Namra]

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

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

[Himaladin]

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).

[Namra]

I did this, but it is not working

[Himaladin]

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.

[Namra]

did that not working

[Namra]

[Namra]

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

[Himaladin]

@Himaladin

You need to write the class name (grid-container) in the container component options section.

[Namra]

I did that

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

[Himaladin]

You wait, if your container is a form container.

[Himaladin]

/* 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;
}

[Namra]

@Himaladin

.

Thank you very much it is working

[Namra]

but adding title give just change alignment of things like this

[Himaladin]

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.

[Namra]

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

[Himaladin]

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.

[Namra]

Thank you for your support!