CSS problems... « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Kenguru
Member

Oh, I have to sorrily admit, that I am not any CSS expert... :(. I can make some basic changes, but this is something I cannot fix. I would be very gratefull, if somebody could give me a hint?

http://tinyurl.com/c4ox2zk

I have entered the needed css styles to the form information, because I want the radio input options (both 2 of them) to be in the same line. Very simple, and preview shows it correctly and nicely.

But but... The theme I am using is making some strange this... :( It not only overrides the Gravity Form css (that I understand), but it also make a line break after the radio button - ugly looking and very strange...!?

So where and how would it be best to do some altering so that both Gravity form styles are in use and the line break is gone?

I would highly appreciate your help, indeed! I think this is very easy for somebody, who really knows CSS.

Posted 12 years ago on Monday November 28, 2011 | Permalink
Rob Harrell
Member
It looks like the gravity forms style sheet isn't coming through at all. Do you have the Output CSS option selected in your settings? If so, how are you placing the form on the page. The ready classes should achieve what you are looking to do out of the box if we can get the gravity forms style sheet to come through:

http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

An alternate fix would be to add this:
```
[css]
.gchoice_1_0 {
float: left;
width: 22%;
}
.gchoice_1_1 {
float: left;
clear: none;
}
.gchoice_1_0 label, .gchoice_1_1 label {
display: inline;
}
```
Posted 12 years ago on Monday November 28, 2011 | Permalink
Kenguru
Member

Oh, how kind of you, thanks a lot!!!

Well, I had not selected the CSS output, sorry. Obviously I need it, and it does still leave all the basic styles from my theme, great!

No the line break is gone, very good.
But the radio button option lines are in different rows, when they should be in the same line.

In advance tab I have this in the CSS Clas name:
gf_list_2col

Is it correct? How can I get the radio button options to the same line?

(The simple text fields are correctly in the same row.)

Thanks again! :)

Posted 12 years ago on Monday November 28, 2011 | Permalink

You have a style in your theme that's clearing the floats on the radio buttons ready styles, pop this into your theme's stylesheet:

[css]
.gform_wrapper li.gfield.gf_list_2col ul.gfield_checkbox li, .gform_wrapper li.gfield.gf_list_2col ul.gfield_radio li, .gform_wrapper li.gfield.gf_2col ul.gfield_checkbox li, .gform_wrapper li.gfield.gf_2col ul.gfield_radio li {
clear: none;
}

Posted 12 years ago on Monday November 28, 2011 | Permalink

Kenguru
Member

Okei, I added your code given here to my theme's stylesheet, and now it is working! Thanks a lot.

But I still wonder, why the "gf_list_2col" style did not work.

Posted 12 years ago on Monday November 28, 2011 | Permalink
Carl Hancock
Administrator

@Kenguru Do you have the CSS Ready Class implemented right now? Let me know which field and I can take a look and see why it is not being applied.

Posted 12 years ago on Tuesday November 29, 2011 | Permalink
Rob Harrell
Member
The gf_list_2col style is working, the conflict was on line 2587 of style.css - there is:
```
[css]
form ul, form li {
list-style-type: none;
list-style-position: outside;
border: 0;
margin: 0 0 20px 0 !important;
padding: 0 !important;
display: block;
clear: both;
background: 0 !important;
}
```
That clear:both was causing the float:left of the ready class to still float:left, but clear the float above it first.
Posted 12 years ago on Tuesday November 29, 2011 | Permalink