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.

Madlib style form question (issues with inline input)

Gravity Support Forums » Plugin Support » Gravity Forms

  1. jstnlngls
    Member

    I've poked around on the forum, but I haven't found an answer yet.

    I'm using the familiar Madlibs style tutorial CSS available here: http://www.rocketgenius.com/gravity-forms-mad-lib-style-form-demo/

    But, my form seems to be a bit finicky ... there are some issues with all fields displaying inline. I'm using a theme with some built-in support for Gravity Forms, but I'm not certain that this is where the problem lies. Even when I remove that custom styling, the inline issues don't go away.

    You can find the post here: http://www.brokencitylab.org/madlibs-test-form/
    The password to view it is 1234

    Here's the CSS that I'm using:

    http://pastie.org/3424502

    Posted 12 years ago on Monday February 20, 2012 | Permalink

  2. Rob Harrell
    Member

    On this style, try replacing it with this: I added padding: 0;

    [css]
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="text"], body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="email"], body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="password"], body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="url"], body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="tel"] {
margin-top: 4px;
border-top: none;
border-right: none;
border-bottom: 1px dashed black;
border-left: none;
background-color: white;
width: 99%;
font-size: 18px;
color: black;
font-family: "acta-display", Georgia, sans-serif;
font-style: normal;
padding: 0;
}
    Posted 12 years ago on Monday February 20, 2012 | Permalink

  3. jstnlngls
    Member

    Hmmm, thanks for the idea, but no fix yet. You can visit the link where I've updated the css.

    Just in case, I thought it be might be worth posting the xml to make sure there's nothing weird in there either.

    The exported form can be found here: http://dl.dropbox.com/u/868828/gravityforms-export-2012-02-20.xml

    Posted 12 years ago on Monday February 20, 2012 | Permalink

  4. Rob Harrell
    Member

    Well, I got this close, but I had to reduce the font size a bit and adjust the padding on the wrapper. Try this (just replace the chunks):

    [css]
body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="text"], body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="email"], body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="password"], body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="url"], body #gform_wrapper_2.gform_wrapper form.madlibform .gfield.madlibstyle input[type="tel"] {
margin-top: 4px;
border-top: none;
border-right: none;
border-bottom: 1px dashed black;
border-left: none;
background-color: white;
width: 99%;
font-size: 13px;
color: black;
font-family: "acta-display", Georgia, sans-serif;
font-style: normal;
padding: 0;
}
body #gform_wrapper_2.gform_wrapper {
font-size: 13px;
color: #666;
}
body #gform_wrapper_2.gform_wrapper {
max-width: 99%!important;
margin: 50px auto;
border: 1px solid white;
background-color: white;
padding: 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
-khtml-border-radius: 8px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
position: relative;
overflow: visible!important;
font-size: 13px;
color: #666;
}
    Posted 12 years ago on Monday February 20, 2012 | Permalink

  5. jstnlngls
    Member

    Thanks! That did it. You might want to put the CSS code in again. I copied it from the page source as it wasn't showing up in your reply above.

    Weird that the font size limits how it can wrap, but I'll take what I can get!

    Thanks again.

    Posted 12 years ago on Tuesday February 21, 2012 | Permalink

  6. Rob Harrell
    Member

    Awesome, glad to help!

    Posted 12 years ago on Tuesday February 21, 2012 | Permalink

This topic has been resolved and has been closed to new replies.