cforms II User Forum

Registration is currently disabled.
Guest

FAQs

Lost password?
Advanced Search:

— Forum Scope —



— Match —



— Forum Options —




Wildcard usage:
*  matches any number of characters    %  matches exactly one character

Minimum search word length is 4 characters - maximum search word length is 84 characters

Topic RSS
2 column forms
December 20, 2007
12:17 am
Willy Foo
Guest

Any guide how to do multiple columns for input fields? Ideally I could tag styles like "col1,col2,col3" to input fields like I can do to text fields. But in the meantime what is the best way to do it manually?

I've attempted something but it does not align properly (ie. Time & Duration is offset)

Also how do I get "Estimated Prints" to move to the right of "4R Prints" or even beside "Printing" group label?

December 20, 2007
7:59 am
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

There is no real guide for now other than the wide_brown_light (with the form preset: Online Booking Form) example that does exactly what you're trying to achieve.

  1. Label tag widths are fine here but you may have to adjust (see 2.)
  2. It sets the corresponding input tag width to 135px

    #cf_field_15,#cf_field_16,
    #cf2_field_15,#cf2_field_16,
    #cf3_field_15,#cf3_field_16{
    width:135px;
    }
  3. Most important: it floats the LI elements the above fields are in to the left:

    li#li--16, li#li-2-16, li#li-3-16, li#li-4-16, li#li--15, li#li-2-15, li#li-3-15, li#li-4-15 {
    display:inline;
    float:left;
    margin:0pt 0pt 0pt 45px !important;
    }
  4. Optionally you may have to adjust the margins for the above LI items, too:

    li#li--17, li#li-2-17, li#li-3-17, li#li-4-17 {
    margin-left:45px !important;
    margin-right:28px !important;
    }
  5. Finally, after the last floated LI item, you need to clear with the next LI item:

    li#li--19, li#li-2-19, li#li-3-19, li#li-4-19 {
    clear:both;
    padding-top:10px;
    }

NOTE: The above LI#ABC element ID's are just what's being used in my example you form may have different ID's, you need to look these up in the actual HTML source code of the page your form is on.

To solve your other problem, this should give you a head start:

  1. move 'Estimated Prints' above the 'Printing' field in your form configuration
  2. once moved, add the following styles to the CSS:
    li#li--14 { float:right; margin: 0 64px 0 0!important; }
    li#li--15 { padding-top:16px; }
    .cf-box-group { clear:right; }

December 21, 2007
2:45 am
Willy Foo
Guest

Ok.. at least it splits into 2 columns now.. just some positioning glitches which I'll iron out slowly..

The main thing I can't figure out yet is how to prevent the calendar icon from pushing the input box of "Event Date" down..

December 21, 2007
6:29 pm
Willy Foo
Guest

Oh man.. after all this.. realised that it doesn't show the 2nd column in safari!!!
Where is a good place to get help on this??

December 21, 2007
7:25 pm
Oliver
Munich, Germany
Admin
Forum Posts: 6400
Member Since:
March 6, 2005
Offline

Good question, perhaps check with some Mac/Safari forums.

Considering the number of Safari users (no offense) in relation to our MS IE / FF  / Opera readers, I've personally stopped worrying about Safari inconsistencies.

The above CSS code isn't even "highly specific", funny that Safari can't even deal with that… ;-)

Forum Timezone: Europe/Berlin

Most Users Ever Online: 959

Currently Online:
26 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

tracedef: 43

mores: 21

Gyrus: 20

frozenwaste: 18

asuffredini: 15

photoworks: 14

Member Stats:

Guest Posters: 3708

Members: 1463

Moderators: 3

Admins: 2

Forum Stats:

Groups: 1

Forums: 4

Topics: 5307

Posts: 18665

Newest Members: juredujmovic, dreamkeeper, rajattyagi, wrokaa, lukass

Moderators: Paul (421), cnymike (8), sonika (95)

Administrators: Oliver (6400), Nicky (3)