PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

CSS for group fields

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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 12 years ago on Wednesday May 9, 2012 | Permalink
  7. What exactly are you trying to achieve that isn't working, specifically?

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