Adjust positioning of Form Element « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

tariq
Member

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 12 years ago on Tuesday August 23, 2011 | Permalink
Carl Hancock
Administrator

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 12 years ago on Tuesday August 23, 2011 | Permalink
tariq
Member

Which value do I need to adjust to move the form element inline with the other form elements,

Thanks

Posted 12 years ago on Tuesday August 23, 2011 | Permalink
Kevin Flahaut
Administrator
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 12 years ago on Wednesday August 24, 2011 | Permalink
tariq
Member

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 12 years ago on Friday August 26, 2011 | Permalink
David Smith
Member
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 12 years ago on Friday August 26, 2011 | Permalink
tariq
Member
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 12 years ago on Monday August 29, 2011 | Permalink
David Smith
Member

Hi Tariq,

I'm not seeing that style in your stylesheet?

Posted 12 years ago on Monday August 29, 2011 | Permalink
tariq
Member

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 12 years ago on Monday August 29, 2011 | Permalink
Kevin Flahaut
Administrator
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 12 years ago on Monday August 29, 2011 | Permalink
tariq
Member

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 12 years ago on Friday September 2, 2011 | Permalink
tariq
Member

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 12 years ago on Friday September 2, 2011 | Permalink
tariq
Member

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 12 years ago on Monday September 5, 2011 | Permalink
Chris Hajer
Key Master

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 12 years ago on Tuesday September 6, 2011 | Permalink
Kevin Flahaut
Administrator
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 12 years ago on Tuesday September 6, 2011 | Permalink
tariq
Member

Hi Kevin,

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

Posted 12 years ago on Tuesday September 6, 2011 | Permalink
Kevin Flahaut
Administrator

Hi Tariq.

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

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

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