My image button "count me in" on this page moves on click...can't figure out why...
http://kickboxing.karate-usa.com
Once this issue is fixed I'm done with that page/form. It's the last problem I've encountered I can't figure out.
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.
Submit button custom image moves on click
-
You've still got bigger problems than that. If the validation fails, the fields are pushed to the side and the submit button is cropped out of the viewable area and can't be accessed.
screenshot: http://grab.by/84Hh
You'll either need to change the validation error styling, or remove the hidden overflow properties from the form container.
Also, just FYI, the "snow" script on your page is killing my browsers.. It's choked both Firefox & Safari. It's festive, but not that great if I'm trying to browse your site.
Posted 13 years ago on Sunday December 26, 2010 | Permalink -
the overflow is set on the #contentbox div on line 294 of your default.css file. That's what's clipping the form when the validation errors are triggered.
Part of your problem is that you've defined the #gform_wrapper_6 div as 250px wide, but then defined the list container inside it as 440px wide on line 27 of your default.css file. If you set that to 250px as well, you'll see that it fits horizontally.
Also, instead of setting the height value on the #gform_wrapper_6, you should probably go with a min-height property so when the validation errors are shown, the container resizes appropriately vertically to show all of the content.
I really have no idea what's going on with the image button moving. I'm pretty sure it has something to do with width/padding discrepancies in the CSS rules somewhere. If you begin to clean that stuff up, it may fix itself, I'm not totally sure.
You should find this helpful too. It has examples of how to properly target form elements to apply new CSS rules.
http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/
Posted 13 years ago on Wednesday January 5, 2011 | Permalink -
You would have to add custom CSS to your themes stylesheet to style the form. You would do so by targeting the CSS classes used by the form.
Here is information on how to target the classes used when validation is triggered:
http://www.gravityhelp.com/documentation/css-targeting-samples/#validation
You would have to adjust the styling so it fits within your fixed height/width box. Adjusting things like padding, margin, etc.
Posted 13 years ago on Wednesday January 5, 2011 | Permalink -
The image button works fine in the default theme and nobody else has reported a similar issue to date.
I looks like you've still got some wacky CSS going on for the validation errors as well as some of the sizing. That's probably still the cause of your issue.
screenshot: http://grab.by/8hPi
It's difficult to inspect via the browser's developer tools and find out what's going on. The movement happens when the button is in the active state, so the inspectors don't really show me what's happening there.
I do know that it's specific to your theme. I'm unable to recreate the issue.
Posted 13 years ago on Monday January 10, 2011 | Permalink
