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.

Adjust positioning of Form Element

  1. Hi,

    I would like to adjust the position of the form element, on the Call Back Form on the index page of: http://www.bubbleit.com/ The AM/PM Drop down seems to be out of place and not inline with the other sections

    Thanks

    Posted 11 years ago on Tuesday August 23, 2011 | Permalink
  2. This is due to CSS in your themes stylesheet. See this screenshot: http://i.imgur.com/525yH.png

    That CSS on line 694 of your style.css file is setting margin on all selects. You will have to adjust your themes stylesheet to correct this.

    Posted 11 years ago on Tuesday August 23, 2011 | Permalink
  3. Which value do I need to adjust to move the form element inline with the other form elements,

    Thanks

    Posted 11 years ago on Tuesday August 23, 2011 | Permalink
  4. Try adding this to the end of your theme stylesheet. It should override the theme style.

    [css]
    .blog-categ .gform_wrapper select {margin:0}

    screenshot: http://bit.ly/nPBauz

    Posted 11 years ago on Wednesday August 24, 2011 | Permalink
  5. Thanks for that, a few more question, firstly what application / addon do you use to inspect the elements as shown in your screenshot?

    If you take a look at the URL again, there seems to be a large gap at the bottom of the form on the right menu, can this been made smaller?

    Also the drop down, AM/PM the right side of the box seems to be cut off whilst using Firefox, is there any reason for this?

    Thanks

    Posted 11 years ago on Friday August 26, 2011 | Permalink
  6. Thanks for that, a few more question, firstly what application / addon do you use to inspect the elements as shown in your screenshot?

    Firebug. Best. Thing. Ever.

    If you take a look at the URL again, there seems to be a large gap at the bottom of the form on the right menu, can this been made smaller?

    Looks like you just need to remove the bottom margin from the form wrapper:

    [css]
    .gform_wrapper { margin-bottom: 0 !important; }

    Also the drop down, AM/PM the right side of the box seems to be cut off whilst using Firefox, is there any reason for this?

    Could you get a screengrab of what you're seeing?

    Posted 11 years ago on Friday August 26, 2011 | Permalink
  7. Hi I inserted the following code:

    [css]
    .gform_wrapper { margin-bottom: 0 !important; }

    into my stylesheet and it had no effect on the form.

    Posted 11 years ago on Monday August 29, 2011 | Permalink
  8. Hi Tariq,

    I'm not seeing that style in your stylesheet?

    Posted 11 years ago on Monday August 29, 2011 | Permalink
  9. Hi I took it out since it had no effect once I put it in and tested it, I can put it back in for you, please let me know if you would it back in?

    Thanks

    Posted 11 years ago on Monday August 29, 2011 | Permalink
  10. That gform_wrapper style was being applied properly, but that wasn't the issue. Part of the problem is the containing div for the widget. You can try this, but it will remove the gap between the gray left borders.

    [css]
    div#gform_widget-4 {
        margin-bottom:0
    }

    And or, you can reduce the padding in the form footer to save some space.

    [css]
    body #gform_wrapper_2 .gform_footer {
        padding-bottom: 0
    }
    Posted 11 years ago on Monday August 29, 2011 | Permalink
  11. Hi I have just checked the site in Internet Explorer and the form is not being displayed properly,

    Seems as if it is being squashed: http://www.bubbleit.com.

    It appears perfectly in Firefox and Chrome, I initally thought it was the modifications which I was asked to try however they have no effect on the form.

    Thanks

    Tariq

    Posted 11 years ago on Friday September 2, 2011 | Permalink
  12. In addition on the Contact Page: http://www.bubbleit.com/contact

    The Verification box is not aligned like it is in Firefox.

    Thanks

    Tariq

    Posted 11 years ago on Friday September 2, 2011 | Permalink
  13. Hi I have not heard a response from this issue and it is very urgent since IE users are unable to use the script?

    Posted 11 years ago on Monday September 5, 2011 | Permalink
  14. Your post landed here at the beginning of a three day weekend (today is a national holiday in the United States) which will explain the delay in response.

    Can you post a screenshot of what looks correct (Firefox & Chrome) and what looks bad (IE - which version?) Thank you.

    Posted 11 years ago on Tuesday September 6, 2011 | Permalink
  15. This isn't a Gravity Form issue, it's a theme style problem. It originates from your theme stylesheet.. specifically style.css line 673 where you find this rule..

    [css]
    .blog-categ ul li {
        color: #A1A1A1;
        float: left;
        margin-left: 10px;
    }

    The float property is causing your problem. If you disable that, you'll see that the layout problem goes away.

    screenshot: http://bit.ly/oJwAK7

    You'll need to either remove that property, or add another rule to the end of your theme stylesheet to override that for your forms. You can try this.

    [css]
    .blog-categ ul#gform_fields_2 li.gfield {
        float: none
    }
    Posted 11 years ago on Tuesday September 6, 2011 | Permalink
  16. Hi Kevin,

    Thanks alot for your help, fixed the issue, :D, great customer service

    Posted 11 years ago on Tuesday September 6, 2011 | Permalink
  17. Hi Tariq.

    I'm very pleased I could help. Thanks for your patience too. It's much appreciated.

    Posted 11 years ago on Tuesday September 6, 2011 | Permalink

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