Use CSS to change layout of fields in a table

asked on October 20, 2014

I am using Forms 9.1.1.1517

I have a table with 8 columns that appear next to each other in one long line ( see "1st.png" attachment).

What i would like to do is change the layout so that the first 3 fields can appear under one another and then the remaining 5 under those first 3 items in one line ( please see "2nd.png" attachment for an example, i just used paint to draw the fields how I would like them to look ).

Is this possible with CSS and if so how?

Thanks

Farren

1st.PNG (26.86 KB)

| Download

2nd.png (32.01 KB)

| Download

0 0

replied on October 21, 2014

I don't think there's a good way to do this with a table. If you look at the page HTML, a table is literally creating an HTML table element, which is pretty limited in terms of what formatting you can apply with CSS. I suppose you could do some serious rearranging of the table with Javascript, but that would be complicated to pull off and I wouldn't recommend it.

You could use a Collection instead of a table, and then the usual CSS customizations would work. If you had elements with IDs q4 through q8 to display side-by-side, you could do something like this:

#q4, #q5, #q6, #q7, #q8 {display:inline-block}

Just know that you may also want to make those fields "x-large" in width (this affects the amount of the available space for the field that is taken up by the actual 'input' element)

1 0

Question

Question

Use CSS to change layout of fields in a table

Replies

Sign in to reply to this post.