3 or more fields on same line « HTML Form Builder Online , PHP Form Creator

This forum is no longer open and is for reading/searching only.

Please use our new MachForm Community Forum instead.

MachForm Community Forums » MachForm 2

3 or more fields on same line

Started 16 years ago by hang-koocho | 15 posts |

hang-koocho
Member

is there a way to display 3 or more fields on the same line? I added following css code,
#li_5{
float: left;
width: 30%;
clear: both;
}

#li_7{
width: 30%;
}

#li_6{
width: 35%;
}

first and second one display side by side, but not the last one.
Please share your soltion to it. thanks

Posted 16 years ago #
Saghalie
Pro Member

It is possible; you will need to adjust the width for each field. Make sure that the total width combined doesn't exceed 100%.

Also, add "float: left;" for each field.

Saghalie
http://www.beautiful-beginnings.org

Posted 16 years ago #
hang-koocho
Member

this css code still not solve my problem

#li_5{
float: left;
width: 30%;
clear: both;
}

#li_7{
width: 30%;
float: left;
clear: both;
}

#li_6{
float: left;
clear: both;
width: 35%;
}

do you know any other methods? I just need to align my fields on the same line. i guess it shouldn't be too hard, but can't seem to find it working.

Posted 16 years ago #
yuniar

clear: both; should be used for the first field only.

So if li_5 is the first field, remove clear: both; from the others.
MachForm Founder

Posted 16 years ago #
hang-koocho
Member

Even I add clear: both; on the first field still no success
Please take a look at my form
http://eastwoodcompanies.com/enshop/index.php?main_page=page&id=41

I add the following css code
#li_1{
float: left;
width: 40%;
clear: both;
}

#li_2{
width: 55%;
}

#li_5{
float: left;
width: 30%;
clear: both;
}

#li_7{
width: 30%;
}

#li_6{

width: 35%;
}

#li_25{
float: left;
clear: both;
width: 40%;
}

#li_28{
width: 50%;
}

#li_10{
float: left;
width: 30%;
clear: both;
}

#li_11{
width: 30%;
}

#li_12{
width: 35%;
}

#li_27{
float: left;
clear: both;
width: 40%;
}

#li_26{
width: 50%;
}

#li_14{
float: left;
width: 30%;
clear: both;
}

#li_15{
width: 30%;
}

#li_16{
width: 35%;
}

#li_29{
float: left;
clear: both;
width: 40%;
}

#li_30{
width: 50%;
}

#li_18{
float: left;
width: 30%;
clear: both;
}

#li_19{
width: 30%;
}

#li_20{
width: 35%;
}

#li_32{
float: left;
clear: both;
width: 40%;
}

#li_31{
width: 50%;
}

#li_22{
float: left;
width: 30%;
clear: both;
}

#li_23{
width: 30%;
}

#li_24{
width: 35%;
}

#li_34{
float: left;
clear: both;
width: 40%;
}

#li_33{
width: 50%;
}

Posted 16 years ago #
hang-koocho
Member

any solution for this? many thanks

Posted 16 years ago #
yuniar
I'll take a sample with Person1 fields.
The CSS should be like this:
```
#li_5{
float: left;
width: 30%;
clear: both;
}

#li_7{
float: left;
width: 30%;
}

#li_6{
float: left;
width: 35%;
}
```
I think you forgot to add float: left to li_7 and li_6.
MachForm Founder
Posted 16 years ago #

yuniar

For Person2, the CSS should be:

#li_10{
float: left;
width: 30%;
clear: both;
}

#li_11{
float: left;
width: 30%;
}

#li_12{
float: left;
width: 35%;
}

For Person3, the CSS should be:

#li_14{
float: left;
width: 30%;
clear: both;
}

#li_15{
float: left;
width: 30%;
}

#li_16{
float: left;
width: 35%;
}

and so on for the others.

I hope I'm being clear for you.

MachForm Founder

Posted 16 years ago #

expat
Member

maybe u mean, the first field on the line should have the clear: both; ;)

rather than the first field of the form !!

Posted 16 years ago #
walags
Member

does anyone have an issue with firefox3 and fields on the same line? i have checkboxes in my form. everything is fine in IE but in ff3 the fields can not be selected.

Posted 16 years ago #
yuniar

expat -- sorry! you're right, it should be the first field on the line.

walags -- can you paste the URL of your form?

or you can use this form and submit there: http://www.appnitro.com/support/index.php?pg=request
MachForm Founder

Posted 16 years ago #
hang-koocho
Member

yuniar, thanks for you post, i added code you suggest but still no success.
Now if you look at my sample on person1 and person 2 here
http://eastwoodcompanies.com/enshop/index.php?main_page=page&id=41

only Name - Phone - Email should be on the same line
Concerned about weight - Concerned about diabetes should be below.

now part of the css code is
#li_1{
float: left;
width: 40%;
clear: both;
}

#li_2{
width: 55%;
}

#li_5{
float: left;
width: 30%;
clear: both;
}

#li_7{
float: left;
width: 30%;
}

#li_6{
float: left;
width: 35%;
}

#li_25{
float: left;
clear: both;
width: 40%;
}

#li_28{
float: left;
width: 50%;
}

#li_10{
float: left;
width: 30%;
clear: both;
}

#li_11{
float: left;
width: 30%;
}

#li_12{
float: left;
width: 35%;
}

#li_27{
float: left;
clear: both;
width: 40%;
}

#li_26{
float: left;
width: 50%;
}

it shouldnt behave this way, please take a look sample again

many thanks

Posted 16 years ago #
yuniar

Hmm.. if you checked the direct link to your form:
http://eastwoodcompanies.com/formca_tec/embed.php?id=1

it shows the correct three fields on single line.

but got messed up when embedded on:
http://eastwoodcompanies.com/enshop/index.php?main_page=page&id=41

perhaps you should try to make the width of those fields to be smaller, try 25% instead of 30%.

Or perhaps can I login to your MachForm to fix this?

Please let me know the detail by opening a request here:
http://www.appnitro.com/support/index.php?pg=request
MachForm Founder

Posted 16 years ago #
hang-koocho
Member

yuniar, by changing the width of the affected form it finally works!
the original code was
#li_5{
float: left;
width: 30%;
clear: both;
}

#li_7{
float: left;
width: 30%;
}

#li_6{
float: left;
width: 35%;
}

it change to
#li_5{
float: left;
width: 30%;
clear: both;
}

#li_7{
float: left;
width: 24%;
}

#li_6{
float: left;
width: 38%;
}

the total width now is 92% it was 95%.

thanks for your great support!

Posted 16 years ago #
yuniar

great!
MachForm Founder

Posted 16 years ago #

RSS feed for this topic

Reply

You must log in to post.