Started 3 years ago by hang-koocho | 15 posts |
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
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
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.
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
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%;
}
any solution for this? many thanks
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
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
maybe u mean, the first field on the line should have the clear: both; ;)
rather than the first field of the form !!
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.
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
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
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
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!
great!
MachForm Founder
You must log in to post.