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

How do I get fields on the same line?


  1. franki
    Member

    Excellent support. THANK YOU.

    Posted 15 years ago #
  2. Carlos
    Member

    I have tried to get this to work but to no avail.
    The site is http://www.sydneydistrict4x4.com.au/form.html

    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.

    Posted 15 years ago #
  3. Carlos
    Member

    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

    Posted 15 years ago #
  4. icore
    Member

    How can I adjust the highlight area for the Phone field?

    Posted 15 years ago #
  5. toppdizzle
    Member

    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?

    Posted 15 years ago #
  6. yuniar

    @icore

    the width or the height?

    @topdizzle

    post me an URL and I'll see what might wrong.


    MachForm Founder

    Posted 15 years ago #
  7. toppdizzle
    Member

    Here is the form:

    http://meadowlark.org.s44555.gridserver.com/redesign/machform/view.php?id=4

    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

    Posted 15 years ago #
  8. yuniar

    topdizzle,

    Ok, make sure to remove all CSS code which might affect the "Income" fields.
    Then try this 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;
    }

    MachForm Founder

    Posted 15 years ago #
  9. susane
    Member

    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

    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.

    Posted 15 years ago #
  10. yuniar

    susane, that's awesome!


    MachForm Founder

    Posted 15 years ago #
  11. bbijou
    Member

    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?

    Posted 15 years ago #
  12. toltnews
    Member

    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?

    Posted 15 years ago #
  13. yuniar

    Right click on your form and then choose "View Source". That would show you your HTML source.


    MachForm Founder

    Posted 15 years ago #
  14. elysiumgoz
    Member

    I've applied this to a form - which is great and thanks to all who helped on this post.

    The problem I've got is displaying Guidelines.... for the life of me I can't figure out how to get them to display without interfering with other fields. Am I asking too much? Or can I display them either somewhere else (below the field?) or without any transparency so that the form behind the Guideline is not visible.

    thanks

    Posted 15 years ago #
  15. islanddesign
    Member

    I have created two forms with fields on the same line using your solution above. Both were working fine until a short while ago when the fields on the left aren't selectable unless I tab from the very top of the browser window (Address bar) to the first field.

    If you try to go back to any of the fields on the left they still cannot be selected.

    Take a look at the forms here:
    http://t1digitalgraphics.com/contact.htm

    http://t1digitalgraphics.com/upload.htm

    Thank you,
    Karen

    PS... I tried clearing my cache, cookies and the like but nothing worked.

    Posted 15 years ago #
  16. yuniar

    Karen,

    For this form:
    http://t1digitalgraphics.com/contact.htm

    I think you have some error with the CSS code:

    #li_2,#li_6,{
    width: 45%;
    float: left;
    }

    note the extra comma at the end, it should be:

    #li_2,#li_6{
    width: 45%;
    float: left;
    }

    For the other form, I can't check it because it's password protected :-)


    MachForm Founder

    Posted 15 years ago #
  17. islanddesign
    Member

    Thanks Yuniar,

    You were correct, it was the extra comma in the contact form. There was an extra one in the other form as well, I removed it but am still having that problem. I will send you an email with access to the form, if you could take a look at it I would greatly appreciate it.

    I realize that my request is beyond the norm and really appreciate your assistance and impeccable customer service!

    Karen

    Posted 15 years ago #
  18. smarta123
    Member

    Hi

    I have the page looking how I want but now the Pull Down menus do not work.

    here is the page with the css additions
    http://www.caravanclassifieds.com.au/formbuilder/view.php?id=6

    and one without

    http://www.caravanclassifieds.com.au/formbuilder/view.php?id=3

    this is what I added to the CSS - did I miss something !!??

    }
    #li_18{
    float: left;
    width: 45%;
    clear: both;
    }
    #li_11{
    float: left;
    width: 45%;
    clear: both;
    }
    #li_24{
    float: left;
    width: 45%;
    clear: both;
    }
    #li_29{
    float: left;
    width: 45%;
    clear: both;
    }

    Posted 15 years ago #
  19. smarta123
    Member

    sorry the urls are the wrong way around in my previous post

    http://www.caravanclassifieds.com.au/formbuilder/view.php?id=6
    this one work with no CSS adjustment

    http://www.caravanclassifieds.com.au/formbuilder/view.php?id=3
    this one does not work after the css was edited

    Posted 15 years ago #
  20. smarta123
    Member

    it appears whatever field appears on the left will not work - both text field and pull downs won't work once they have the code applied to them

    Posted 15 years ago #

RSS feed for this topic

Reply »