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.

Float Field labels inside form field

Gravity Support Forums » Plugin Support » Gravity Forms

  1. carnavat
    Member

    Ive seen people wanting to have default values that auto clear but that removes the ability to have the fields required. so I have decided to try floating the field labels over the forms fields and then indenting the text to start at the end of the label.

    I havent been able to find a cross browser friendly way to do this,
    getting the field label to float perfectly in the center (top and bottom) of the form. On some browsers the label is near the top, or near the bottom, or perfectly centered.

    --------------------------------------
    THE LABEL the field text
    --------------------------------------

    Posted 11 years ago on Saturday October 13, 2012 | Permalink

  2. Chris Hajer
    Key Master

    Are you looking for help for this still? If so, please post a URL to your site where we can see what you have accomplished. Thank you.

    Posted 11 years ago on Monday October 15, 2012 | Permalink

  3. carnavat
    Member

    http://wordpressstreet.com/watson/

    Ive had to make browser specific margin changes to keep the field labels in the middle of the field and still on each browser they are off. This is the home page horizontal form.

    Posted 11 years ago on Monday October 15, 2012 | Permalink

  4. carnavat
    Member

    I also have to figure out how to remove the error css which doesnt pay attention to the normal css changes.. Kinda annoying how that works. click submit missing a field and its all messed up.

    Posted 11 years ago on Monday October 15, 2012 | Permalink

  5. Chris Hajer
    Key Master

    The labels looked OK to me in Firefox 15.0.1 on Windows 7 and Chrome 22 on Windows 7 as well. You might have to tackle each browser individually and use conditional CSS to apply browser-specific rules. There are already some conditional comments in use in the page and you might be able to piggyback on those. Here is just one of them, for IE9:

    <!--[if IE 9 ]>
<link rel="stylesheet" href="http://wordpressstreet.com/watson/wp-content/themes/richardshepherd-TwentyTenFive-ed29e68/ie9.css" type="text/css" />
<![endif]-->
    Posted 11 years ago on Tuesday October 16, 2012 | Permalink