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.

Spacing at Bottom of Form! ARHGHGHG

  1. Gosh, we've spent hours on trying to get rid of the large space at the bottom of the form using negative padding and everything we could think of.

    We made some progress here....

    But it's still driving us Batty. See below...


    Well I have messed about with that Gravity beast. What I added in Catalyst CSS.

    /* Orignial CSS #gform_wrapper_22{margin:10px 0 -80px 0px !important;}*/
    /* changes below, by bambo */

    /* whole damn thing */
    #gform_wrapper_22 {

    #gform_wrapper_22 textarea { overflow: auto; } /* remove scrollbar in IE unless required */

    /* Only footer area */
    #gform_wrapper_22 .gform_footer {
    padding-top: 0px;
    margin-top: 0px;
    margin-bottom: -39px; /* Not quite the same in all browsers but close */
    text-align: center;

    /* only button in footer = submit button, give it transparent background if png file (a good one!) /*
    /* Can't freaking nail that button but check gravity forums {background:transparent;} /*
    /* Element must be button only, not footer or anything else, Im gone blind... /*

    Only problem was that damn image/submit button. I just cannot figure out how to focus on that. Quite sure I did it at some point but then changed stuff... Not that important just annoying. I went to Gravity forums but have no access.

    I uploaded my poorly fixed button with no borders and have edited the form to use that. = new button = old button

    so you can change back if you like. Did not change anything else.

    The reason it would be very nice to nail that button is if you make a new one and have a transparent background of may be 5px. Then you will want background of button to be transparent = done! I have cheated and made background same color as form, is #daf58a - not really the best solution. I have entered your stage I think, can't figure out how to do CSS right now. You can see in Firebug that the input/submit button has both class and what not. Just can't figure it out.

    Also not optimal if you add text to footer area which you want aligned to the left. Now all footer content is centered, just the button so ok but only because there is nothing else. Understanding problem is half the solution so just be aware of this.

    If you notice the 2 boxes are not 100% aligned if you check IE9 vs. Firefox vs. Chrome. 2 pixels or so lacks in IE9 Don't know why. I think they react a tiny bit differently to those text-fields and that sums up 1-3 pixel differences at bottom. Can be fixed by simply giving box a fixed height, 393px fits perfectly in ALL browsers. OR so I thought. What happens when a visitor fill out form worng? Check Height must be fluid then.

    I removed default scrollbar in IE browsers - now it only shows when required.

    I highly suggest you visit Gravity forums and have coffee ready, heh. I am quite sure you will learn a lot and can see what others are doing. There are very few limits, practically a "page builder" if used to full extend. I think you need to know their conventions and ways before using it max. From what I have read they should have really good support but just looking at what others are doing is often enough. Have your Firebug ready 24/7

    Seems like it is Gravity that inserts thouse empty <p></p> paragraphs at bottom. Shortcode Ultimate has nothing to do with this from what I can tell. Shortcode "note" thingy adds a 15px border around whole form but does not matter than much. Why Gravity does this I don't know, question for their forum me thinks.

    This is a potential problem because lets say an update to Gravity removes those <p></p>s then form will look like crap since there is no longer need for negative margin or at least much less. But as you can see from CSS it is no big deal to change, just have to keep it in mind. Seems odd to me since everything else in Gravity is so fine grained. Could not see anything to tinker with in form builder itself, idea is obviously to adjust afterwards with CSS.

    Slim chance that Shortcode Ultimate really is to blame and works behind the scene. From looking at code it seems to come from Gravity though. Whole form is however surrounded by a shortcode so can't rule it out 100%.

    Definitely easy to change stuff via Catalyst custom-CSS. What Gravitys CSS style guide is for. So doing this is totally after the book. I am annoyed about the button though, heh. From experience I know it will not help to try 20 times more, heh. May be your helper can do it. Somehow I think "input" needs to be part of element but really not sure. Also possible to declare a class in form editor itself btw. Gravity is a mini-research project, half a Catalyst, but if you dig in to their forum and such it will pay back since you will be able to do practically whatever. Is the tool pro uses.

    Posted 11 years ago on Monday July 18, 2011 | Permalink
  2. Okay, I'm not following like 90% of your post here. It seems to change to a set of third-person comments from someone else about half way down. Are those comments from your theme developer? I'm not sure exactly what you're asking for help with but here goes.

    To begin with, Gravity Forms doesn't insert any empty < p > tags. When extra markup is added, it's usually due to wrapping the form in some other shortcode or a conflict with another plugin or script. You can try testing for theme/plugin conflicts to help narrow down where it might be coming from.

    If you want to target the button element itself for CSS manipulation, it's not difficult. There is a guide here with actual samples of how to target specific form elements.. the submit button included.

    for a standard form input element

    body .gform_wrapper .gform_footer input[type=submit] {border:1px solid red}

    and for an image button

    body .gform_wrapper .gform_footer input[type=image] {border:1px solid red}

    If you're having some sizing discrepancies in IE9, then you can use IE specific css files to set different properties so you can tweak the display.

    I'm really not sure what you're talking about with the button image/background and how that relates to your CSS. Just use a transparent 24bit PNG file and it should display over your background just fine.

    Posted 11 years ago on Monday July 18, 2011 | Permalink

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