You are viewing limited content. For full access, please sign in.

Question

Question

position sections next to each other

Forms
Updated August 21, 2024
asked on August 13, 2024

I have a scenario where I have 4 sections.

Three sections contain various fields and the fourth contains one large multiline field.

Is it possible to position the first three sections on the left side and the remaining section with the large multiline field on the right hand side side?

0 0

Answer

SELECTED ANSWER
replied on August 20, 2024

How big is your multiline field? is it big enough that the section containing it is at least as tall as the three sections to be put on the right? If thats the case you can add the class col-sm-8 to the main section and col-sm-4 to the sidebar sections and you should get something that looks like this:

These col-X-Y classes are bootstrap classes so if for whatever reason this form is loaded on a small screen it will default to the regular form behavior with fields on top of each other. https://getbootstrap.com/docs/3.4/css/#grid

 
 
 
0 0

Replies

replied on August 13, 2024

This is easy to do with the form designer and can be replicated with css in the classic designer. Which designer are you using?

0 0
replied on August 13, 2024

Hi Zachary.

I am using the classic designer so was hoping to use css.

I'm just not getting it to work properly.

0 0
SELECTED ANSWER
replied on August 20, 2024

How big is your multiline field? is it big enough that the section containing it is at least as tall as the three sections to be put on the right? If thats the case you can add the class col-sm-8 to the main section and col-sm-4 to the sidebar sections and you should get something that looks like this:

These col-X-Y classes are bootstrap classes so if for whatever reason this form is loaded on a small screen it will default to the regular form behavior with fields on top of each other. https://getbootstrap.com/docs/3.4/css/#grid

 
 
 
0 0
replied on August 21, 2024

Thank you so much Zachary

0 0
replied on August 14, 2024

David,

 

In Short yes.

I do this to get an iFrame next to fields like below:

Use the following CSS:

#q7 {display:inline-block;width:40%;vertical-align:top;}
#q8 {display:inline-block;width:60%;vertical-align:top;}

just make sure to update the q#'s to match the numbers of your sections.

I hope that helps.

Good luck!

0 0
replied on August 19, 2024

Hi Troy.

Unfortunately not exactly what I was hoping for.

The end result looks like below.

Section 1    |     Section 2
Section 3    |     Section 4

 

What I am looking for is:

Section 1    |     Section 4
Section 2    |     Section 4
Section 3    |     Section 4

0 0
replied on August 19, 2024 • Show version history

Ah, I see.

It's the sections causing your issue, it is my understanding that nesting sections in classic forms is not doable.

Going to 2 sections Left and Right and putting the associated section data into those two areas would work.

Ex.

Maybe use some custom HTML Fields to make the Headers for the "Sections". The one issue you lose by not being a section is the ability to expand/collapse the fields.

Just a thought.

0 0
replied on August 21, 2024

Hi Troy.

Thank you for your response.
Before seeing Zachary's  response that's the way I went and got sort of a look I was looking for.

Much appreciated.

 

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...