Set Label Field Position and Setting 2 Forms Next to Eachother

Gravity Support Forums » Plugin Support » Gravity Forms

RobertR
Member

Hi,

I tried the search but that didn't work out for me, not sure why. The form I am trying to edit is;
http://gepiept.nl/wp/plaats-een-klusje

If you'll click through you'll see the field I want to change about halfway the page; the 2 dropdowns with field label: "Deze klus moet worden uitgevoerd op" and "om". I am trying to

- Set a icon for this field (if you could point me in the right direction that would be great!)
- Get the label field next to the input field
- Getting those 2 fields next to each other

So, ideally it would be like this;
http://postimage.org/image/n9iqum38r/

I was hoping to find the answer for the latter in http://www.gravityhelp.com/forums/topic/data-fields-in-same-row but that didn't work. Any help would highly be appreciated!

Posted 11 years ago on Thursday December 20, 2012 | Permalink
Chris Hajer
Key Master
You can add the CSS Class Name "gf_inline" to the two drop downs on the advanced tab of the form builder. You can also add the CSS class of "left_label". The CSS Class Name field for both fields will then look like this:
```
[css]
gf_inline left_label
```
Be sure to put a space between the two attributes.

That will get the two fields side by side, with the label on the left.

You might have to add an HTML field right before the first drop down, with this content:
```
[html]
<br style="clear:both;" />
```
Please explain what icon you want to use and where you want to show up, for which fields. Thank you.
Posted 11 years ago on Thursday December 20, 2012 | Permalink
RobertR
Member

Thanks for the reply, it worked partially. Because of the length of the first label field it get's misaligned, is there any way around this?

The icon would purely be for clarification and decoration, to style the form a bit. I would like the icons to appear in front of the Label Fields. Example; http://postimage.org/image/446pox3w5/

Posted 11 years ago on Thursday December 20, 2012 | Permalink
Chris Hajer
Key Master

Can you make the change on the live page and post the link again so we can see the progress? We can help with the additional CSS required. I received a 404 Not Found error when trying to access the initial link you posted.

Posted 11 years ago on Saturday December 22, 2012 | Permalink
RobertR
Member

Yeah I changed something in the functions.php .. which i shouldn't have done haha ;p It's back online now > http://gepiept.nl/plaats-schoonmaak-klusje/

Thanks for the support! It took me 2 days of pondering whether I needed GF but seems like to have been a good choice :)

Posted 11 years ago on Sunday December 23, 2012 | Permalink
Chris Hajer
Key Master
The width of the left label is set to 29% by Gravity Forms. You can override this by adding this CSS to your theme's style.css:
```
[css]
body .gform_wrapper .left_label .gfield_label {
 width: 60%;  /* change this 60% to whatever width you want */
}
```
There may not be a good way to have the text not wrap onto two lines because the label has so much text. You might need to put the label in an HTML field above these drop downs, or maybe you can shorten the text.
Posted 11 years ago on Sunday December 23, 2012 | Permalink
RobertR
Member
It works, the second field label is overlapped by the field itself but that's okay. Thanks for the help Chris :)

Got any thoughts on the icons? I tried adding a new CSS class and assigning that to specific fields but that didn't work, the code I tried;
```
[css]
#navlist
{
margin-left: 0;
padding-left: 0;
list-style: none;
}

#navlist li
{
padding-left: 10px;
background-image: url(http://gepiept.nl/wp-content/uploads/2012/12/arrow.png);
background-repeat: no-repeat;
background-position: 0 .5em;
}
```
Posted 11 years ago on Friday December 28, 2012 | Permalink
Chris Hajer
Key Master

I could not get your form to load. The site comes up, but the page is blank. That is a different problem.

However, if you added a class to the fields in the form builder of "navlist" then your CSS is incorrect. You are targetting ID not Class. Change #navlist to .navlist and it will apply to classes.

Your CSS could be a little more specific as well, but the first problem is that you are targetting an ID rather than a Class, which is what Gravity Forms will add: a CSS class name.

Posted 11 years ago on Saturday December 29, 2012 | Permalink