Form Columns

Permalink Browser Info Environment
Can anyone give me an explanation (and maybe some basic code) for creating a two or three column form?

Many thanks.

Type: Discussion
Status: In Progress
russellglee1
View Replies:
jgarcia replied on at Permalink Reply
jgarcia
You'll have to Google for something like "multi-column form css" or something like that. This would be beyond the scope of support for this add-on.
russellglee1 replied on at Permalink Reply
russellglee1
My mistake. I thought as this was the "Questions and Discussion" forum that one of the other users might contribute.
jgarcia replied on at Permalink Reply
jgarcia
Well, you're right...it's kind of used as both actually. :)
tallacman replied on at Permalink Reply
tallacman
I am accomplishing something like this with this css:

div#sem-field-container-33.sem-field-container ,
div#sem-field-container-38.sem-field-container ,
div#sem-field-container-41.sem-field-container ,
div#sem-field-container-26.sem-field-container ,
div#sem-field-container-27.sem-field-container ,
div#sem-field-container-15.sem-field-container ,
div#sem-field-container-17.sem-field-container ,
div#sem-field-container-8.sem-field-container ,
div#sem-field-container-10.sem-field-container ,
div#sem-field-container-5.sem-field-container ,
div#sem-field-container-2.sem-field-container {
   float: left;
   margin-right: 98px;
}


url:http://www.sierrafieldservice.com/index.php?cID=86...

steve
jgarcia replied on at Permalink Reply
jgarcia
Looks great tallacman! Thanks for posting.
russellglee1 replied on at Permalink Reply
russellglee1
Thank you very much! I worked with and modified your template and . . . voilà . . . my form had columns. Very helpful. Thanks again!
tallacman replied on at Permalink Reply
tallacman
Glad I could help.

steve
russellglee1 replied on at Permalink Reply
russellglee1
One follow-up question if you don't mind -- (1) What is the CSS used in the Styles box for the Submit button?
goowai replied on at Permalink Reply
goowai
il link non funziona più, comunque grazie per il css
MATRiXX5252 replied on at Permalink Reply
MATRiXX5252
I know you replied to this several months ago, but your page is no longer posted for the example of creating a multi-column form.

You provided this code:

div#sem-field-container-33.sem-field-container ,
div#sem-field-container-38.sem-field-container ,
div#sem-field-container-41.sem-field-container ,
div#sem-field-container-26.sem-field-container ,
div#sem-field-container-27.sem-field-container ,
div#sem-field-container-15.sem-field-container ,
div#sem-field-container-17.sem-field-container ,
div#sem-field-container-8.sem-field-container ,
div#sem-field-container-10.sem-field-container ,
div#sem-field-container-5.sem-field-container ,
div#sem-field-container-2.sem-field-container {
float: left;
margin-right: 98px;
}

Where (specifically) would this code be placed? Thank you so much for your efforts!
tallacman replied on at Permalink Reply
tallacman
It would go in your css file. It would have to have the number changed for your specific ID.
TeKnoZiz replied on at Permalink Reply
TeKnoZiz
A bit tedious but does the trick, thanks for your input!
ArchiCentre replied on at Permalink Reply
ArchiCentre
Hi tallacman, same question here please about location of CSS file. Any pointers appreciated.
chameleon replied on at Permalink Reply
chameleon
I know this post hasn't been touched in a long time, but I found it helpful today. And for anyone else who stumbles upon it, to answer the question of where to put the css, you will add it to the style editor.

From the dashboard, under Advanced Forms >> Styles.
Create a style name.
Edit your newly created style.
At the very bottom of the listing is an open block labeled "Custom classes or IDs" place tallacman's code there.
>> Save All.

Then from the page that you have added the advanced form to edit, attach the style that you created.

When you save and preview you will see that some of your fields have shifted.

The id numbers that are used in the form by using tallacman's code will force that field to the left and the next field under it will wrap to the right of it.

Hope that is helpful for someone.
Ps - thanks tallacman; found this really helpful!

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.