CSS for group fields « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

tanksalot
Member

I have read a few threads on this and have experimented some but am still not able to get these fields to appear as the other throughout the site. The fields are what I will call group fields, meaning separate first and last name fields, the address fields, and the email fields if Confirm Email is activated. They are not picking up the CSS I have added.

See http://gardensare.com/contact (you have to select the first checkbox to expose the address fields) and http://gardensare.com/employment-application/

How do I target these fields in these forms?

Posted 12 years ago on Saturday April 7, 2012 | Permalink
Kevin Flahaut
Administrator

take a look at the examples here.. they should help you get to where you need to be.
http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

Posted 12 years ago on Saturday April 7, 2012 | Permalink
Kevin Flahaut
Administrator
This should get you closer. The theme developer specified a height on the inputs, but didn't target ALL of them correctly to force the same height. You can add this to the end of your theme stylesheet.
```
[css]
body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=text],
body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=email],
body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=tel],
body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=url],
body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=number],
body .gform_wrapper .gform_body .gform_fields .ginput_complex input[type=password],
body .gform_wrapper .gform_body .gform_fields .ginput_complex select {
    height: 28px;
}
```
test screenshot: http://bit.ly/I3ZoBW

Also, I noticed some break tags in that area of the form markup that are not normally there. Those are most likely being introduced by some other plugin or even your theme. That could be causing some layout problems itself. You may want to test for conflicts to find out where the extraneous markup is coming from.

http://www.gravityhelp.com/documentation/page/Testing_for_a_Theme/Plugin_Conflict
Posted 12 years ago on Saturday April 7, 2012 | Permalink
tanksalot
Member

Will check on the plugin conflicts next. About that CSS you provided. Does that replace whatever else is in there or an addition to it? I can pull the height CSS that is already there if needed. (just trying to keep it clean and short)

Thanks Kevin

Posted 12 years ago on Monday April 9, 2012 | Permalink
Kevin Flahaut
Administrator

You can remove the existing height specification if you want or you can just add this (not replace anything) to the end of your stylesheet. It's really up to you and how you prefer everything to look.

Posted 12 years ago on Monday April 9, 2012 | Permalink

tanksalot
Member

I'm not sure I understand. The enclosed CSS is what I have now. Are there ways to streamline it? Are there redundancies I can remove safely? Thank you.

[css]
.gform_wrapper .top_label .gfield_label {
  display:block;
  font-weight:normal;
  line-height:normal;
}
.gform_wrapper .top_label input.large, .gform_wrapper .top_label select.large, .gform_wrapper .top_label textarea.textarea  {
  height:109px;
  width:90%;
}
.gform_wrapper .top_label input.medium, .gform_wrapper .top_label select.medium {
  height:28px;
  width:75%;
}
.gform_wrapper .gform_body .gform_fields .ginput_complex input[type=text],
.gform_wrapper .gform_body .gform_fields .ginput_complex input[type=email],
.gform_wrapper .gform_body .gform_fields .ginput_complex input[type=tel],
.gform_wrapper .gform_body .gform_fields .ginput_complex input[type=url],
.gform_wrapper .gform_body .gform_fields .ginput_complex input[type=number],
.gform_wrapper .gform_body .gform_fields .ginput_complex input[type=password],
.gform_wrapper .gform_body .gform_fields .ginput_complex select {
    height: 28px;
}
.gform_wrapper input[type="text"], .gform_wrapper input[type="url"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="password"] {
  border:1px solid #DDD;
  border-top:1px solid #BBB;
  color:#999;
  font: -webkit-small-control;
  padding:1px 1px 1px 12px;
}
.gform_wrapper input[type="text"]:hover, .gform_wrapper input[type="url"]:hover, .gform_wrapper input[type="email"]:hover, .gform_wrapper input[type="tel"]:hover, .gform_wrapper input[type="number"]:hover, .gform_wrapper input[type="password"]:hover {
  border:1px solid #AAA;
}
.gform_wrapper input[type="text"]:focus, .gform_wrapper input[type="url"]:focus, .gform_wrapper input[type="email"]:focus, .gform_wrapper input[type="tel"]:focus, .gform_wrapper input[type="number"]:focus, .gform_wrapper input[type="password"]:focus {
  background-color:#FAFAFA;
  color:#666;
}
.gform_wrapper textarea {
  border:1px solid #DDD;
  border-top:1px solid #BBB;
  color:#999;
  font: -webkit-small-control;
  margin:0 0 15px 0;
  padding:12px 2px 2px 12px;
  resize:both;
}
.gform_wrapper textarea:hover {
  border:1px solid #AAA;
}
.gform_wrapper textarea:focus {
  background-color:#FAFAFA;
  color:#666;
}
#recaptcha_table {
  border:none !important;
}
.recaptchatable .recaptcha_image_cell {
  background-color:transparent !important;
}
#recaptcha_logo, #recaptcha_tagline {
  display:none;
}
.recaptchatable #recaptcha_response_field {
  border:1px solid #DFDFDF !important;
  font-size:11px !important;
  height:28px;
  line-height:1.3;
  padding:0;
}
.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type="submit"] {
  background: -moz-linear-gradient(top, #F9F9F9, #F0F0F0);
  background: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#F0F0F0));
  border: 1px solid #DEDEDE;
  border-color: #DEDEDE #D8D8D8 #D3D3D3;
  -moz-box-shadow: 0 1px 2px #EAEAEA, inset 0 1px 0 #FBFBFB;
  -webkit-box-shadow: 0 1px 2px #EAEAEA, inset 0 1px 0 #FBFBFB;
  box-shadow: 0 1px 2px #EAEAEA, inset 0 1px 0 #FBFBFB;
  color: #555 !important;
  cursor:pointer;
  font:bold 12px/1em HelveticaNeue, Arial, sans-serif;
  padding:8px 11px;
  text-shadow:0 1px 0 #FFF;
}
.gform_wrapper .gform_footer input.button:hover, .gform_wrapper .gform_footer input.button:focus, .gform_wrapper .gform_footer input[type="submit"]:hover, .gform_wrapper .gform_footer input[type="submit"]:focus {
  background: -moz-linear-gradient(top, #F9F9F9, #E9E9E9);
  background: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E9E9E9));
}
.gform_wrapper .gform_footer input.button:active, .gform_wrapper .gform_footer input[type="submit"]:active {
  background: #EFEFEF;
  background: -moz-linear-gradient(top, #EAEAEA, #F4F4F4);
  background: -webkit-gradient(linear, left top, left bottom, from(#EAEAEA), to(#F4F4F4));
  position:relative;
  top:1px;
}
#gform_wrapper_1 {
  max-width:inherit;
}
#gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label .gfield_required {
  display:none;
}

Posted 11 years ago on Wednesday May 9, 2012 | Permalink

Rob Harrell
Member

What exactly are you trying to achieve that isn't working, specifically?

Posted 11 years ago on Wednesday May 9, 2012 | Permalink