Appnitro Software Forums Topic: How do I get fields on the same line?

Appnitro Software Forums Topic: How do I get fields on the same line? http://www.appnitro.com/forums/ Appnitro Software Forums Topic: How do I get fields on the same line? en Thu, 20 Nov 2008 21:27:40 +0000 yuniar on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3465 Thu, 30 Oct 2008 10:58:43 +0000 yuniar 3465@http://www.appnitro.com/forums/ Right click on your form and then choose "View Source". That would show you your HTML source. toltnews on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3437 Wed, 29 Oct 2008 07:05:21 +0000 toltnews 3437@http://www.appnitro.com/forums/ I've read through all the answers to this question and I have no idea where I find the PHP with the li info. I've looked at the html code, I've opened the CSS file, but I still cannot find where to change what. I see Susane put together a great order of sequence, but I'm already lost at step 2. any instructions for dummies? bbijou on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3420 Mon, 27 Oct 2008 23:32:34 +0000 bbijou 3420@http://www.appnitro.com/forums/ When I log into the MachForm admin on my site, on the CSS tab, the field is not populated. I read thru the other posts on the and saw that the PHP is in safe mode? How do I turn that off so I can modify the CSS? yuniar on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3355 Mon, 20 Oct 2008 09:37:52 +0000 yuniar 3355@http://www.appnitro.com/forums/ susane, that's awesome! susane on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3350 Mon, 20 Oct 2008 00:13:06 +0000 susane 3350@http://www.appnitro.com/forums/ Thanks for the explanations. It took me almost an hour to figure out how to put one field next to another, so I thought I'd share what I learned. The reason it took me a while, is that the instructions and explanations were scattered throughout this thread. I'm going to try to put it all in one place. This old post by Yunair was the most helpful, but there were some key elements missing that are helpful (which I'll explain below). ________________ This is Yunair's old post: To do this, you will need to add some custom CSS into your CSS file. Okay, let's take a sample. Here's our first form: Original Form Now, let say we want to have Phone field sit next to Email field, like this one: Final Form What we need to do is look in the HTML code and find the <li> elements surrounding those fields (Phone and Email). Inside that element is an id value. For example Email might have li_2 and the Phone field would have li_3. With those id values, you can use the following CSS to target and float the fields next to each other: #li_2{ float: left; width: 35%; clear: both; } #li_3{ width: 55%; float: left; } #li_4{ clear: both; } #li_4 is the next element after the aligned fields. We need to add this to reset the alignment. Copy that code into your CSS file and save it. (Click Edit CSS from your Admin panel) Refresh your form and those fields should have the new alignment. I realized this is quite some work, so if you need any help, just post it here and I'll try to help. ---------- My additions: 1) Find the line numbers that are to be combined What I learned is that, in order to figure out which line numbers (#li_) are being referred to, you must view your finished form and right click on it and choose "view source" - to view the source code. Do a find for key text in the lines you are interested in combining. For example, if you are looking for the email line, find the word email. Look there, and you will see the line numbers associated with the field. Use this information for the new code. 2) Insert the new code at the end of the CSS file 3) Make sure the width of the total number of lines that you are combining do not add up to more than 100%. If they do, adjust accordingly. 4) Empty your cache 5) Refresh your online form. The lines should have been combined onto one line. I hope this helps someone. yuniar on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3310 Thu, 16 Oct 2008 12:34:52 +0000 yuniar 3310@http://www.appnitro.com/forums/ topdizzle, Ok, make sure to remove all CSS code which might affect the "Income" fields. Then try this code: <pre><code>/* Below is your Income - Monthly fields */ #li_52,#li_51,#li_55,#li_59,#li_57,#li_61{ float: left; width: 35%; clear: both; } /* Below is your Income - Annual fields */ #li_50,#li_53,#li_54,#li_58,#li_56,#li_60{ width: 55%; float: left; } #li_75{ clear: both; }</code></pre> toppdizzle on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3301 Tue, 14 Oct 2008 20:42:02 +0000 toppdizzle 3301@http://www.appnitro.com/forums/ Here is the form: <a href="http://meadowlark.org.s44555.gridserver.com/redesign/machform/view.php?id=4" rel="nofollow">http://meadowlark.org.s44555.gridserver.com/redesign/machform/view.php?id=4</a> My issue is mainly towards the bottom where the income values are concerned. There will be one income category but it will need two values; monthly and annually. I would like these to be on the same line. I would like to think that seeing this exemplified would help me figure this out down the road. I tried making this mod using the list values used in the demo code when this post was originally started, but it doesn't solve me problem yuniar on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3297 Tue, 14 Oct 2008 15:28:34 +0000 yuniar 3297@http://www.appnitro.com/forums/ @icore the width or the height? @topdizzle post me an URL and I'll see what might wrong. toppdizzle on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3290 Tue, 14 Oct 2008 08:33:54 +0000 toppdizzle 3290@http://www.appnitro.com/forums/ Despite the amount of content posted on this thread, I cannot get this functionality on any field type other than radio buttons. You have your cape ready? icore on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3279 Sat, 11 Oct 2008 01:06:21 +0000 icore 3279@http://www.appnitro.com/forums/ How can I adjust the highlight area for the Phone field? Carlos on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3273 Thu, 09 Oct 2008 13:04:30 +0000 Carlos 3273@http://www.appnitro.com/forums/ I have worked it out. When the size was medium the highlighted area stayed large. So set the size to large and it looks OK. Cheers Carlos Carlos on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3272 Thu, 09 Oct 2008 12:30:22 +0000 Carlos 3272@http://www.appnitro.com/forums/ I have tried to get this to work but to no avail. The site is <a href="http://www.sydneydistrict4x4.com.au/form.html" rel="nofollow">http://www.sydneydistrict4x4.com.au/form.html</a> I want the type of point earned and point value to be on the same line. I have added the code to the bottom of the view.css but it still stays the same. I have refreshed the cache etc any help would be great Carlos I managed to get them to move but the hint yellow area is eating up too much room and has moved the boxes around. I am sure I am missing a bit of CSS to make it look correct. franki on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/3#post-3264 Thu, 09 Oct 2008 01:09:44 +0000 franki 3264@http://www.appnitro.com/forums/ Excellent support. THANK YOU. yuniar on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/2#post-3253 Wed, 08 Oct 2008 12:56:23 +0000 yuniar 3253@http://www.appnitro.com/forums/ Ahh.. great. That one is quite simple actually. Here is the CSS code: <pre><code>#li_2 label.description{ width: 40%; float: left; }</code></pre> Just change "li_2" with your own id. franki on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/2#post-3251 Wed, 08 Oct 2008 10:31:29 +0000 franki 3251@http://www.appnitro.com/forums/ Exactly right, yes. That's what I need right there. Thanks! yuniar on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/2#post-3224 Mon, 06 Oct 2008 12:48:41 +0000 yuniar 3224@http://www.appnitro.com/forums/ Oh.. do you mean like this: <a href="http://www.appnitro.com/forms/view.php?id=20" rel="nofollow">http://www.appnitro.com/forms/view.php?id=20</a> No? franki on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/2#post-3209 Sat, 04 Oct 2008 19:15:42 +0000 franki 3209@http://www.appnitro.com/forums/ Well sort of. I was looking to have the radios over to the right rather than below the field label. Thank you for your quick reply. yuniar on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/2#post-3205 Sat, 04 Oct 2008 13:35:21 +0000 yuniar 3205@http://www.appnitro.com/forums/ you might want to check this: <a href="http://www.appnitro.com/forums/topic/radio-buttons-on-same-line?replies=7#post-329" rel="nofollow">http://www.appnitro.com/forums/topic/radio-buttons-on-same-line?replies=7#post-329</a> is that what you need? franki on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/2#post-3204 Sat, 04 Oct 2008 12:37:37 +0000 franki 3204@http://www.appnitro.com/forums/ I'd like to jump in here and ask yuniar the css king :) how do I get the radios to go to the right of the label instead of underneath it? I have some Yes/No questions on my form and I think it would look much better if If I can get them to be stacked vertically to the right. If I can get the solution I'll be a very happy man! Thank you. melanieme on "How do I get fields on the same line?" http://www.appnitro.com/forums/topic/how-do-i-get-fields-on-the-same-line/page/2#post-2805 Sat, 30 Aug 2008 01:03:18 +0000 melanieme 2805@http://www.appnitro.com/forums/ And notice that some form elements are already side by side, such as the city and state in the address fields. The css that controls this is: <pre><code>#main_body form li div.left { display:inline; float:left; width:48%; } #main_body form li div.right { display:inline; float:right; width:48%; }</code></pre> You could easily adapt this css for the #li_number example given above.