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.

Single Text Box Left, Submit Button Right - CSS Issue

  1. jblack350
    Member

    Hello -

    I am having with a simple form I created using gravity forms. All I want is to have my email text box aligned left and my submit button aligned right -- both on the same line. I am getting close, but have spent a couple hours and can't quite get it.

    The form is on the left sidebar at http://www.mattcarterband.com - the submit button is on the line below the text box. Any ideas?

    Posted 11 years ago on Sunday August 26, 2012 | Permalink
  2. Please see this topic for an explanation and solution:
    http://www.gravityhelp.com/forums/topic/trouble-positioning-submit-button-inline#post-19798

    Modifying the values that Kevin previously used worked OK for me on your sidebar form:

    [css]
    /* make the form container relative for positioning */
    
    body #gform_wrapper_1 {
        position: relative;
    }
    
    /* resize and position the form footer with the button */
    
    body #gform_wrapper_1 .gform_footer {
        width: auto;
        position: absolute;
        top: 22px;
        left: 160px;
        padding: 0;
        margin: 0;
    }

    Feel free to change the top and left to put the button right where you want it.

    Posted 11 years ago on Sunday August 26, 2012 | Permalink
  3. jblack350
    Member

    Chris - huge help, thanks a lot! Any idea where the space above the textbox/submit button is coming from? I don't see any padding anywhere, but there is 10-15px between the border and the top of the submit button.

    Posted 11 years ago on Sunday August 26, 2012 | Permalink
  4. Mastal
    Member

    I was bored while was waiting for something and saw your problem.

    I think that if you add this css rule, the problem will disappear:

    [css]
    body #gform_wrapper_1 .gfield_label {
        display: none;
    }
    
    body #gform_wrapper_1 .gform_footer {
        top: 0;
    }

    Hope it helps.

    Posted 11 years ago on Sunday August 26, 2012 | Permalink