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.

change width of Post Fields Body to less than small

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Anonymous
    Unregistered

    I need to put a form in a sidebar, and the small size weighing in at 50 columns is to wide. Is there a way to customize that size, via a variable, or css?

    Posted 14 years ago on Friday February 12, 2010 | Permalink

  2. Carl Hancock
    Administrator

    You will have to add some custom CSS to your themes stylesheet to override the default styles and adjust it to fit your sidebar.

    If you provide a link to a page where we can view it in action, i'm sure Kevin could give you some pointers on some CSS that can be added to style it so it fits in.

    Also remember when placing a form in a sidebar that you will want to stick to simple form fields as fields such as the complex Address field will probably hit size constraints real quick.

    Are you using Joost's Gravity Forms Widget code to place the form in the sidebar?

    Posted 14 years ago on Friday February 12, 2010 | Permalink

  3. Kevin Flahaut
    Administrator

    If you're using the "top label" setting, the out-of-the-box CSS settings should work fine unless there is some CSS inheritance issue from your theme.

    I have a test form in a sidebar using the default settings. You can see my screenshot. The top two fields are set to "small" to demonstrate the size.

    You can target the "small" class by using a CSS snippet like the one below.

    #gform_wrapper_xx .top_label input.small, #gform_wrapper_xx .top_label select.small {
	width:25%;
}

    You'll want to change the "#gform_wrapper_xx" to your actual form id, something more like "#gform_wrapper_1". You can then edit the width value to whatever you prefer, a percentage or fixed pixel width. You'll want to append this CSS to the bottom of your theme style sheet to get it all working correctly.

    Posted 14 years ago on Friday February 12, 2010 | Permalink

  4. Anonymous
    Unregistered

    That has gotten me on the right track, as that changed the subject, but not the text area. I am using the free core theme from StudioPress and the Widget from Joust. The site is behind a firewall on an intranet, so I may have to put up another site to show you.

    Ok,
    #gform_wrapper_xx .top_label textarea.small

    Worked. Thank you for pointing me down the right path!!!!!

    Posted 14 years ago on Friday February 12, 2010 | Permalink

  5. Carl Hancock
    Administrator

    Glad you got it working!

    Posted 14 years ago on Friday February 12, 2010 | Permalink

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