Reduce horizontal space

  • Profile Image
    hlmink
    Asked on March 07, 2013 at 04:46 PM

    How can I reduce space between fields on the same line?

  • Profile Image
    sidharth_kch
    Answered on March 07, 2013 at 04:56 PM

    @ hlmink

     

    Please refer this guide to do it -How-can-I-change-spacing-between-questions

    If the spaces are still too wide for your preference, you can inject CSS codes to further reduce the spaces.

    Please inform us should you need further assistance.

    Thanks,

    Sidharth

     

  • Profile Image
    hlmink
    Answered on March 08, 2013 at 11:31 AM
    New response received
    Thanks but I am asking about reducing space for two fields that are on the
    same line
    ==================
    Rabbi Hirshy Minkowicz
    Chabad of North Fulton
    10180 Jones Bridge Road
    Alpharetta, Georgia 30022
    Tel-770-410-9000
    www.ChabadNF.org
    rabbi@chabadNF.org
  • Profile Image
    jefreylandicho
    Answered on March 08, 2013 at 11:38 AM

    Can you please provide us the form URL you want the space reduce so may further provide assistance?

  • Profile Image
    hlmink
    Answered on March 08, 2013 at 11:41 AM
    New response received
    It is a general question I would like to do it with many forms. When you
    have two fields on one line (through shrink) I would like to move the two
    fields closer to each other
    ==================
    Rabbi Hirshy Minkowicz
    Chabad of North Fulton
    10180 Jones Bridge Road
    Alpharetta, Georgia 30022
    Tel-770-410-9000
    www.ChabadNF.org
    rabbi@chabadNF.org
  • Profile Image
    ardy0689
    Answered on March 08, 2013 at 12:54 PM

    Hello there,

    It really depends on your field IDs. You also have to use a browser addon in Firefox called FireBug that can view the CSS of a live page not just the source code. Any tool can do as long as it has the ability to look into live source code. The page source is different than the actual source code when it is shown in the screen

     

    Here, I used Firebug. As you can see I located my target which is the left portion of the first row. We are going to need to remember its ID as well as any class it relates to IF it has one.  In this case, the id is id_1 and it has two classes that we can use so I just took note one of them.

     

    So let's convert it into CSS syntax:

    #id_1.form-line-column{

    }

    Remember, it has two classes in my case and I just took one of them randomly. If it has no class then we can use this for example:

    #id_1{

    }

     

    Ok, you said you want to move it close to each other so we are talking about their margins. Since we targeted the left section instead of the right box, we will manipulate the right margin. In short, the right margin of the left box.

    #id_1.form-line-column{
    margin-right: 25px;
    }

    So I put 25px as a value in there which causes the 2nd box to move 25 pixels to the right.

    If we do inverse of that, we only put negative sign. For example -25px which means 25 pixels to the left and it also means that it will move closer to the 1st box.

    Now the only thing left is to inject that CSS code in your Form Style

     

    To access the form styles:

    1. Open your form in the form builder
    2. Click Setup & Embed tab at the top
    3. Click Preferences button
    4. Click Form Styles Tab

    I hope this will help you get an idea on how you can customize and target your forms.

    Thanks