Appnitro Software Forums » MachForm

41. franki
    Member

    Excellent support. THANK YOU.

    Posted 3 months ago #

42. 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 2 months ago #

43. 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 2 months ago #

44. icore
    Member

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

    Posted 2 months ago #

45. 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 2 months ago #

46. yuniar
    MachForm Founder

    @icore

    the width or the height?

    @topdizzle

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

    Posted 2 months ago #

47. 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 2 months ago #

48. yuniar
    MachForm Founder

    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;
    }

    Posted 2 months ago #

49. 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

50. 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.