Hi,
All formatting and sizing work fine, except the size of the textbox.
How do I size the comment-field the same as the other fields?
Reading other similar issues, I still haven't found how to resolve this.
Regards
Morten Ross
http://www.ross.no/communicate
Morten,
The Gravity Forms styles aren't automatically loaded when you put it in a sidebar widget. If you load the default stylesheet, the fields should fit fine as the widths are all defined as percentages of the container.
Check out the widget styling section on this FAQ page, you can drop a snippet into your functions.php file that will automatically enqueue the default form styles as well as the necessary scripts for the datepicker and conditional logic fields.
http://www.gravityhelp.com/frequently-asked-questions/faq-styling/
Hi,
I don't have problems with list bullets which is in the faq, and inserting the string in black.css or style.css (the only stylesheets loaded according to Firebug) did not cut it, and this was puzzling.
As for your snippet suggestion in functions.php, that finally cut it when digging around quite a bit to this final destination: http://www.gravityhelp.com/documentation/embedding-a-form/, and using the code in paragraph "When displaying a form via a function call you will want to add the following code to your theme’s function.php file:"
This was quite hard to find, and it seems quite a few come across the same problem when they want the form in the sidebar. In fact I doubt a anoyone gets the form right in the sidebar, as there are so many variations of a solution, and I was certain I checked them all.
I suggest the sidebar/widget functionality is upgraded to work as a default selection in gravityhelp.
Many thanks for you help anyway - it wouldn't have worked out without it :-)
Now to the sizing of the form:
All the fields's right margin is much bigger than the left margin - how do I expand?
The comments field is also very small.
How to I expand the the comment field's width and height?
Morten
Gravity Forms doesn't have a default widget. You and others are using third party widgets that work with our forms but aren't provided or supported by us. There isn't any "upgrading" to be done.
Eventually, we will incorporate a widget element into Gravity Forms and it will work without manually enqueueing the styles and scripts, but for now, you simply have to do that with these third party offerings.
You can resize your textarea by targeting its unique input id like this..
textarea#input_1_5 {width:195px}
You can tweak the sizes and other properties to your liking from there.
Morton, apologies, I probably wasn't clear. That last snippet should go in your theme's stylesheet, probably style.css - just add it at the end of the file.
Thank you - That nailed it for me.
Looking forward to the 'official widget'/
Hi,
Now the widget is available and that's great. But it will not properly format, and problem is the same as when I posted initially here.
I have been able to dig back to the broken URI above and updated the functions.php, and the abovementioned snippet above to styles.css.
It seems very dependant on the theme, and as I have now updated my theme, the abovementioned does no longer result in the layout as it was before.
Now the name fields are tiny, and to the far left instead of underneath the "Name" header.
"Name" and "Email" headers are not aligned to the left, but indented 2 characters compared to the "comments" header.
Email field is also very small.
The "Submit" button is now in the middle instead of to the leftmost position, and in a different format.
I'm no longer able to display the form in the sidebar as it is on my live site: http://www.ross.no/communicate
Please advise.
Regards
Morten
The form I'm seeing (in the right sidebar) looks like it's formatted just fine. I don't see a centered button, etc. The field widths are set in percentage values so they should adapt to most horizontal sizes but may still require some tweaking to fit your particular application. For example, If you're working with a very tight horizontal space, then using the "advanced" name field with side-by-side inputs may not be the best choice. Single text inputs for first and last name stacked vertically might be a better option in that scenario.
screenshot: http://bit.ly/qrChaH
Yes, the form styles are "dependent on the theme" for much of their styling. That's by design. The forms are intended to take on styling characteristics from your theme CSS so they better match the look and feel of your site out of the box.
Hi Kevin,
As I mentioned my live site is working fine, and that is what I want with the upgrade, which of course is not live before it is working.
It would help if I could attach screenshots to posts (also because e xternal links sooner or later will die an render post reference somewhat less informative), but I have uploaded from my localhost WP lab where the upgrade is being worked on: http://www.ross.no/temp/GF_sizeProblems_with_Aperture_2.6.jpg
So how do I correct this?
M
Sorry I misunderstood about the live site.
I see your screenshot but I can't tell you what to correct without actually seeing the form on the page so I can inspect the markup and styles.
It looks like you may be using the "left label" form setting which is causing part of your alignment difference. Go to your form in the editor, open the form settings at the top then make sure you have the label placement option set to "top aligned".
screenshot: http://bit.ly/nwLKli
As far as the other issues, I would have to be able to see the form to tell you anything for sure.
Hi,
The live site does have "Top Aligned", but that gives the worst result so I changed it in lab site.
Here it is with top aligned: http://www.ross.no/temp/GF_sizeProblems_with_Aperture_2.6_TopAligned.jpg. It does align all field names properly on the left side though :-)
Without this in style.css, the "Comment" field will not have any left side border:
textarea#input_1_5 {width:192px}. Is there another input_x_x for the three other fields?
I have many widgets in the sidebar, but the GravityForm is actually the only one that requires editing of theme files - which makes it really scary to update the theme...
Yeah, I can't help you out really without seeing the actual form in a page and debugging the issue from there. These problems are coming from your theme styles. The default for layout normally works fine in a sidebar area.
If you're using the widget that's included with Gravity Forms, you shouldn't have to edit any theme files unless you're adding custom CSS rules to your theme stylesheet.
Hi,
I'm having this problem with Aperture 2.6 unmodified - and using the Gravity Forms' widget.
It behaves the same way using any of the theme stylesheets including the default, only the background color changes.
I dread having erranous elements on live site, but you are quick to respond, so I will update here when I have made the update live :-)
Okay, there's the source of your issue then. You're using a theme from Woo Themes.
http://www.woothemes.com/2009/04/aperture/
Woo Themes has added custom CSS rules for Gravity Forms in their themes. That's super in some respects, except they've used CSS rules to override the label placement options and force all of the labels to float to the left regardless of the actual setting you've chosen. This is something we've seen several times here.
http://www.gravityhelp.com/forums/topic/top-aligned-showing-up-as-left-aligned
You'll want to contact the Woo Themes support team and see what they recommend to override their custom styles or you could simply edit your theme stylesheet and remove any existing custom Gravity Forms rules.
Morten,
It's exactly what I told you in the previous post. It's the form styles defined by default in your theme. If you remove those styles (lines 131 - 182) from the black.css file, the form should format properly.
screenshot: http://bit.ly/pflWGh
Yes. The Woo Themes have added a default set of styles for Gravity Forms to all of their themes and those styles are overriding the Gravity Forms defaults.
