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.

Image metadata field label below input shown below field?

Gravity Support Forums » Plugin Support » Gravity Forms

  1. quokka
    Member

    Hi,
    Started off with graivityforms recently. Working like a charm without any problems.

    One thing I can't fix myself and can't find on these forums is this:
    When adding an image field and enabling the image metadata fields, I mean these:
    - Title
    - Caption
    - Description

    The label of those imagedata fields is shown below the text input element.
    I'm desperately trying to show the label before or above each input field..

    Any help on how to fix this would be highly appreciated..
    Thanks in advance!
    Quokka

    Posted 13 years ago on Tuesday December 20, 2011 | Permalink

  2. Carl Hancock
    Administrator

    By default, sublabels in Gravity Forms are shown below the inputs. This is the case with all Advanced Fields which utilize sublabels (the name field, address field, etc.). Currently there is no built in option to reposition these sublabels.

    You might be able to do it with custom CSS and applying your own styles to position these elements, although I don't know off the top of my head what CSS would be necessary to do so. But all the positioning is done using CSS so it can also be customized using CSS.

    Posted 13 years ago on Tuesday December 20, 2011 | Permalink

  3. quokka
    Member

    Hi Carl,
    Thanks for your help.
    Tried that but strange enough that didn't work.
    Have to try a little harder I guess :)
    If I make it work I'll post the solution here for reference.
    If anyone did this before, please let me know..
    Thanks!

    Posted 13 years ago on Wednesday December 21, 2011 | Permalink

  4. quokka
    Member

    Found this:
    http://www.gravityhelp.com/forums/topic/stylesheet-example#post-9737

    Going to test this..

    Posted 13 years ago on Wednesday December 21, 2011 | Permalink

  5. Chris Hajer
    Key Master

    Please let us know if you figure it out.

    Posted 13 years ago on Wednesday December 21, 2011 | Permalink

  6. quokka
    Member

    Hi Chris,

    Sure, here it is!
    Carl pointed me in right direction to search for sublabel in the forums, thanks Carl!

    Turned out to be very simple thanks to Kevin Flahaut's solution:
    http://www.gravityhelp.com/forums/topic/stylesheet-example#post-9737

    Here we go:

    /*--- hide sublabel for browse file caption --- */
.ginput_post_image_file {position: absolute;left: -999em;}

/*--- move sublabel for image caption --- */
.ginput_post_image_caption{position:relative;}
.ginput_post_image_caption input {margin-top:21px; margin-bottom:4px}
.ginput_post_image_caption label {position:absolute; top:0px; margin-top:0;}

/*--- move sublabel for image title --- */
.ginput_post_image_title{position:relative;}
.ginput_post_image_title input {margin-top:21px; margin-bottom:4px}
.ginput_post_image_title label {position:absolute; top:0px; margin-top:0;}

/*--- move sublabel for image description --- */
.ginput_post_image_description{position:relative;}
.ginput_post_image_description input {margin-top:21px; margin-bottom:4px}
.ginput_post_image_description label {position:absolute; top:0px; margin-top:0;}

    Thanks guys & Merry Christmas!
    Bas

    Posted 13 years ago on Thursday December 22, 2011 | Permalink

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