PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How to achieve single text field box next to multiline paragraph

  1. rd458
    Member

    I am building a form that needs a bit of a unique layout. I need a text field, next to a large paragraph of text. I need the text box to stand without title or description. For this particular form, the text field is one of those "Initial to the box at the left if you agree to the following statements....(paragraph with six sentences)."

    I tried gf_left_half and gf_right_half classes, but of course that separates the box from the paragraph with a lot of white space. I tried gf_inline, but then the paragraph appeared below the box, instead of next to the box.

    Also, is is possible to have to have a text field with no description or title? I tried deleting the title but it defaults to 'untitled'.

    Thanks.

    Posted 11 years ago on Monday June 17, 2013 | Permalink
  2. rd458
    Member

    Here is a photoshop of what I'm hoping to achieve.

    http://tinyurl.com/n5vqoro

    Posted 11 years ago on Monday June 17, 2013 | Permalink
  3. We should be able to do this with some custom CSS. Go ahead and set your field up with a label and place your text in the description area of this field that you'd like to show to the right. Once you've done that, hook me up with a link to your form page.

    Posted 11 years ago on Monday June 17, 2013 | Permalink
  4. rd458
    Member

    Scroll down to last section. You will see I did both options. For the last one, I placed the paragraph in the description field. In the other examples, I placed the paragraph in a separate HTML field beside the single line text field.

    Posted 11 years ago on Monday June 17, 2013 | Permalink
  5. Thanks, let's actually mess with the gf_left_half and gf_right_half combo first. Apply those two classes to your last grouping of initial field and HTML field above that last one with the description. Then try dropping this into your theme's stylesheet (or wherever you place custom styles at the theme level) and let me know if that's acceptable:

    [css]
    #field_1_237 {
    width: 10%;
    }
    #field_1_238 {
    width: 90%;
    margin-top: 20px;
    }

    Result

    Posted 11 years ago on Monday June 17, 2013 | Permalink
  6. rd458
    Member

    That worked perfectly! Thanks so much! Ok, so I use Firebug to identify the ID's of the other fields and add those to the same css.

    Is it possible then to also control the exactly width of the single line text field? I notice that sometimes 'small' means something different than 'small' in another single line text field. It seems to depend on what class is applied that defines the 'small' 'medium' and 'large'. I'd like to make it just wide enough to match the width of the text above that says 'initial here'.

    Posted 11 years ago on Monday June 17, 2013 | Permalink
  7. Yes, you would just match up the other field selectors separated by a comma that follow the format above to apply to the other fields.

    You can inspect and target each input individually, each has it's own ID, so that could be an option for you.

    Posted 11 years ago on Monday June 17, 2013 | Permalink