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.

Aligning check boxes and labels

Gravity Support Forums » Plugin Support » Gravity Forms

  1. breitspr
    Member

    Hi,

    I have trouble aligning checkboxes left, they have a huge padding from the left border.
    Also Field Labels break into a new line after 20 letters or something.

    Example hier:
    http://konmed.info/2012/01/17/gesundheitsforum-am-7-februar-mit-heiner-brand/

    Any suggestions? (I provide login data on request)

    Regards

    Posted 13 years ago on Thursday January 19, 2012 | Permalink

  2. Richard Vav
    Administrator

    Without having a look I think it is probably due to a style in your themes style.css file overriding the gravity styling which you should be able to solve by adding another bit of css targeting the checkboxes and setting either the padding-left or margin-left to 0

    The following page of the documentation is a good place to look for how to target different gravity elements with css
    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    Posted 13 years ago on Thursday January 19, 2012 | Permalink

  3. breitspr
    Member

    Please have a look by using konmed as username and password

    I tried 

    [css]
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox {
padding-left: 0px;
margin-left: 0px;
}
    Copy

    and

    [css]
body .gform_wrapper .gform_body .gform_fields .gfield .gfield_checkbox li {
padding-left: 0px;
margin-left: 0px;
}
    Copy

    in custom.css but both did nothing

    Posted 13 years ago on Friday January 20, 2012 | Permalink

  4. Richard Vav
    Administrator

    Ok delete those other css rules from the above post. So using chrome's developer panel I have found the problem in your themes style.css in the section beginning with /* 7.2 Gravity forms */ the 8th css rule down looks like this

    [css]
.gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio {
  margin-left: 120px !important;
}
    Copy

    If you copy the following style into your custom.css (notice how I have changed that 120px to 0) the check box should align itself along the left side of your page like the other fields on your form.

    [css]
.gform_wrapper .gfield_checkbox, .gform_wrapper .gfield_radio {
  margin-left: 0 !important;
}
    Copy
    Posted 13 years ago on Friday January 20, 2012 | Permalink

  5. breitspr
    Member

    Awesome, it worked! Thanks alot man!

    Posted 13 years ago on Friday January 20, 2012 | Permalink

  6. Richard Vav
    Administrator

    Good to hear!

    Posted 13 years ago on Friday January 20, 2012 | Permalink

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