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
image above or right next to either a checkbox or a radio button
Started 14 years ago by arabedioux | 14 posts |
-
almost like this:
http://yehuda.com/listproducts-loosediamonds.asp?type=loose&selectedshape=RB&searchtype=simple&showstatus=2Thanks
Posted 14 years ago # -
redityo
Hi,
It would easier to have the image on the right of checkbox/radio button. To get an image in those field, simply add "img" tag to the options, for example :
<img src="images/yourimage.jpg" />then follow the method that posted in here to get those options line up to the right
http://www.appnitro.com/forums/topic/radio-buttons-on-same-line?replies=19
MachForm Support
Posted 14 years ago # -
I have edited the view-functions.php to have multiple columns of radio buttons/checkboxes. Ialso did having several different fields in the same line by adding line the CSS file.
But what I'm confused about is since because the group of check boxes. How can I asign one for each element?
Can you be kind enough to provide a working example/code?
thank you.
Posted 14 years ago # -
redityo
Sorry If I've missed on something here, basically you can use the element id to your CSS to apply the style on specific element. For example like this :
#li_1 label.choice { display:inline; position:relative; margin-left: 0.2em; _top:0.2em; } #li_1 input.radio { display: inline; margin-left: 0.5em; }Those code will effect on choice field in element 1 only. However is it possible to put your form url/code in here ? so I can know what exactly your problem is
MachForm Support
Posted 14 years ago # -
I would like to make it work with BOTH check and radio boxes please. Thanks!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Form Copy</title> <link rel="stylesheet" type="text/css" href="./data/form_4/css/view.css" media="all" /> <script type="text/javascript" src="js/view.js"></script> </head> <body id="main_body" > <img id="top" src="images/top.png" alt="" /> <div id="form_container"> <h1><a>Untitled Form Copy</a></h1> <form id="form_4" class="appnitro" method="post" action="#main_body"> <div class="form_description"> <h2>Untitled Form Copy</h2> <p>This is your form description. Click here to edit.</p> </div> <ul > <li id="li_8" > <label class="description">Checkboxes </label> <span> <table width="800px" border="0" cellpadding="0"><tr><td width="23%"><input id="element_8_1" name="element_8_1" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_1"> First option</label></td><td width="23%"><input id="element_8_2" name="element_8_2" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_2"> Second option</label></td><td width="23%"><input id="element_8_3" name="element_8_3" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_3"> Third option</label></td><td width="23%"><input id="element_8_4" name="element_8_4" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_4"> Fourth option</label></td></tr><tr><td width="23%"><input id="element_8_5" name="element_8_5" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_5"> Fifth option</label></td><td width="23%"><input id="element_8_6" name="element_8_6" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_6"> Sixth option</label></td><td width="23%"><input id="element_8_7" name="element_8_7" class="element checkbox" type="checkbox" value="1" /> <label class="choice" for="element_8_7"> Seventh option</label></td></table> </span> </li> <li id="li_9" > <label class="description">Multiple Choice </label> <span> <table width="800px" border="0"><tr><td width="23%"><input id="element_9_1" name="element_9" class="element radio" type="radio" value="1" /> <label class="choice" for="element_9_1"> First option</label></td><td width="23%"><input id="element_9_2" name="element_9" class="element radio" type="radio" value="2" /> <label class="choice" for="element_9_2"> Second option</label></td><td width="23%"><input id="element_9_3" name="element_9" class="element radio" type="radio" value="3" /> <label class="choice" for="element_9_3"> Third option</label></td><td width="23%"><input id="element_9_4" name="element_9" class="element radio" type="radio" value="4" /> <label class="choice" for="element_9_4"> Fourth</label></td></tr><tr><td width="23%"><input id="element_9_5" name="element_9" class="element radio" type="radio" value="5" /> <label class="choice" for="element_9_5"> Fifth option</label></td><td width="23%"><input id="element_9_6" name="element_9" class="element radio" type="radio" value="6" /> <label class="choice" for="element_9_6"> Sixth option</label></td><td width="23%"><input id="element_9_7" name="element_9" class="element radio" type="radio" value="7" /> <label class="choice" for="element_9_7"> Seventh option</label></td><td width="23%"><input id="element_9_8" name="element_9" class="element radio" type="radio" value="8" /> <label class="choice" for="element_9_8"> Eigth option</label></td></tr><tr><td width="23%"><input id="element_9_9" name="element_9" class="element radio" type="radio" value="9" /> <label class="choice" for="element_9_9"> Ninth option</label></td></table> </span> </li> <li id="li_buttons" class="buttons"> <input type="hidden" name="form_id" value="4" /> <input type="hidden" name="submit" value="1" /> <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" /> </li> </ul> </form> </div> <img id="bottom" src="images/bottom.png" alt="" /> </body> </html>Posted 14 years ago # -
bump
Posted 14 years ago # -
redityo
Sorry for the delay, the code seems fine when I save it to HTHL.
Actually I'm still confuse, what do you want to achieve ? I see you're using a table to line up your "check box" in column, do you want to have a check box with table and some check box not ? also please send me your form URL so I can see it clearly.MachForm Support
Posted 14 years ago # -
i would like to have a individual pictures right next, or above each radio button/checkbox.
Posted 14 years ago # -
bump
Posted 14 years ago # -
yuniar
Have you tried the above solution posted by redityo? It does exactly like what you asked.
MachForm Founder
Posted 14 years ago # -
No, I want to add a different image to EACH of the checkbox/radio buttons.
What I basically need is a sample css edit that has images right next to, or above the checkboxes/radio buttons.
Thanks.
Posted 14 years ago # -
yuniar
To add different image to each of the checkboxes/radio button, there is no special code/css edit needed.
Simply paste the HTML tag for your image into EACH of your checkbox labels. That would display the image instead of the text labels.
Then, apply the CSS modification as pointed by redityo above, to adjust the alignment.
MachForm Founder
Posted 14 years ago # -
I would like to have BOTH text and image for each checkbox. Also would you be so kind to give me an example beacuse I'm having a hard time understanding how to do this.
Thank you and I really appreciate the help.
Posted 14 years ago # -
yuniar
Yes, you can insert BOTH text and image for each checkbox. Simply put both text and your HTML image tag into your checkbox label.
Example:
This is my image <img src="http://www.yourdomain.com/image.gif" />That would display the text "This is my image" and the image along the text.
MachForm Founder
Posted 14 years ago #
Reply
You must log in to post.