Simple CSS question « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

gringojason
Member
This CSS code was posted by Kevin a few months ago to move the check box below the description...
```
/*restyle agreement field ---------*/

ul#input_17_1 {margin-top:20px!important} /* move checkbox field down */
li#field_17_1 {position:relative;} /* set position on container li */
li#field_17_1 div.gfield_description {position:absolute; top:22px;} /* reposition description field */
li#field_17_1 div.gfield_description.validation_message {position:absolute; top:34px;} /* reposition validation message */
```
I am having trouble knowing what I exactly need to change is terms of class IDs to make this work for me. In the advanced tab of my form, I am identifying this class as legal_disclaimer. So...in the posted code, what is the class Kevin is using? What do I take out and replace with "legal_disclaimer"? Thanks...
Posted 13 years ago on Tuesday May 18, 2010 | Permalink
Kevin Flahaut
Administrator

None of these were based on a custom class name, simply on the default element ID's and classes for a specific form.

If you'd like to share your form URL, It will be easier for me to take a look at it and help you get it done.

Posted 13 years ago on Tuesday May 18, 2010 | Permalink
gringojason
Member

Kevin...

Here is the URL...

http://livefitrevolution.com/?page_id=656

I would just like to move the checkbox to the bottom of the legal disclaimer. Thanks...

Jason.

Posted 13 years ago on Tuesday May 18, 2010 | Permalink
Kevin Flahaut
Administrator
Okay, append this to the end of your style.css file and it should work for you. You can tweak the values a bit to your preference.
```
#gform_wrapper_1 #field_1_15 {position:relative; height:360px}
#gform_wrapper_1 #field_1_15 .ginput_container  {display:block; position:absolute; top:320px; width:98%}
```
It's tailored to your specific form and it worked okay in my test

If you add or remove copy, you'll probably want to tweak the height and top position values again to adjust the spacing.

Let me know how it goes.
Posted 13 years ago on Wednesday May 19, 2010 | Permalink
gringojason
Member

It works great. Thanks Kevin. The only other thing I would love to do is bring the description text in a little to line up with the paragraph entry box above it, and justify the text to make it look cleaner. The HTML tags I used to justify it didn't work. Is it possible to do that? Thanks again for you help!!

Posted 13 years ago on Wednesday May 19, 2010 | Permalink

Okay, I've tweaked it a bit. The heights changed so you will want to overwrite the previous snippet with this one. It removes the margin from the ordered list, adds a width, spaces the list items out a bit and justifies the text.

#gform_wrapper_1 #field_1_15 {position:relative; height:410px}
#gform_wrapper_1 #field_1_15 .ginput_container  {display:block; position:absolute; top:380px; width:98%}
#gform_wrapper_1 #field_1_15 .gfield_description ol {width:550px; margin:0}
#gform_wrapper_1 #field_1_15 .gfield_description ol li {margin-bottom:6px; text-align:justify}

You can see my test here

Posted 13 years ago on Wednesday May 19, 2010 | Permalink

gringojason
Member

That's absolutely beautiful. Thank you so much for your help. Long live GF!!

Posted 13 years ago on Wednesday May 19, 2010 | Permalink

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