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.

Top Aligned showing up as Left Aligned

  1. For some reason, my survey is showing up as Left Aligned, even though it is set to Top Aligned.

    I've even tried adding gf_inline to the fields.

    http://screencast.com/t/p5SjvLql

    By the way. It shows up correctly in the preview. It only does this in the live survey.

    Any ideas?

    Posted 13 years ago on Monday July 11, 2011 | Permalink
  2. Without seeing the actual form where I can inspect the markup and styles, I'm going to take a shot in the dark and say it's a Woo Theme right? If so, their built in theme styles override the label position options in Gravity Forms and only allow for the left floated labels.

    If it IS a Woo Theme, you'll want to contact their support team for guidance on how to best reset the default form styles.

    Posted 13 years ago on Monday July 11, 2011 | Permalink
  3. Wow, you were spot on. It's fresh news by woothemes. I can override their default css if you can point me in the right direction. I don't mind the left aligned if I can simply widen the left column so that there are more than 2 words per line. ;-)

    Posted 13 years ago on Monday July 11, 2011 | Permalink
  4. It will be easier if you can share a link to your form page with me. If so, I can give you a specific CSS snippet to get you started.

    Posted 13 years ago on Monday July 11, 2011 | Permalink
  5. I don't know why I neglected to add that. I appreciate your help.

    http://tonydbaker.com/quick-survey/

    Posted 13 years ago on Monday July 11, 2011 | Permalink
  6. Tony,

    This is what you would add to change the width of the labels.

    [css]
    body .gform_wrapper .top_label .gfield_label {
    	width:150px;
    }

    That said, it's going to open a bunch of other doors like should you text-align all of the labels to the right so they look right and on the second page, increasing the label width somehow was causing the textarea to be hidden partially.. at least in Firefox.

    All of this would be to basically reset your form layout to what already exist as default options. Personally, I would strip the Gravity Forms specific CSS from your theme files, let it reset to the default layout and options, then tweak if needed from there. Again, if you're not sure about it, get in touch with the Woo Themes support team and they can offer some guidance.

    Posted 13 years ago on Monday July 11, 2011 | Permalink
  7. Out of 4 different answers in their forums, I finally found this.

    Simply DELETE this from style.css in your woothemes.

    .gform_wrapper .top_label .gfield_label{display:block;float:left;margin:5px 0 4px !important;padding-right:20px;width:80px;}

    It's in a section called /* Gravity forms */

    I don't know why they even have it in there to begin with! :)

    Thanks for all your help though. Hopefully this will benefit someone else some unwanted frustration!

    Posted 13 years ago on Monday July 11, 2011 | Permalink
  8. Thanks for sharing that. Woo was apparently trying to add custom styling so the form styles matched the theme's in what they felt was the best manner.

    The intentions were good, but overriding the default options causes some extra grief for many folks. We're going to work with them to try to figure it out and make it a little easier for everyone moving forward.

    Posted 13 years ago on Monday July 11, 2011 | Permalink