Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • December 29, 2014 at 5:15 pm #372653
    mconesa

    Hi,
    The datepicker layout in the form is dispayed with a style very diferent from how it’s designed and previewed in the Gravity Forms preview screen. it looks rare, with the year and month input fields one on top of the other, instead of one beside the other in one line.
    Below 3 screenshot links. 1 to the preview and 2 to the actual website view.

    http://www.evernote.com/l/AUgg9zYM3WNIqat8bLy8VUvttSR9wpwuR24/

    http://www.evernote.com/l/AUjF7JI3eBxIvo99BuRTi9QnldSvJLHqDOk/
    http://www.evernote.com/l/AUhNt_Ff6KJJZJKAmiuyy4JpCGiF4SH-dpI/

    I guess this is due to the Theme css overwritting the GF’s one.
    I’m currently using an ENFOLD child theme.

    What I’d like is to know is: How can I overwritte the datepicker css with my own css, coding it in the style.css of the Child theme? .

    I’d like the month and year input fields in one line, as for the GF default style.

    Many thanks for your support,
    Miquel

    December 29, 2014 at 5:36 pm #372672
    Elliott

    Hi mconesa!

    Add this to your custom CSS.

    #top select {
    display: inline-block;
    position: relative;
    width: 70px;
    margin-right: 5px;
}

    Regards,
    Elliott

    January 19, 2015 at 7:55 pm #382059
    mconesa

    Hi Elliott,
    Thanks for your answer. I’ve been working on other stuff for a while and I’ve just seen your answer.

    I’ve tried your code but it was changing all the text input fileds in the form, not only the datepicker ones, so it was not a good solution for me.

    Just in case it’s helpful for others with similar issues, I’ve managed to change only the datepicker month and year input fields by targeting the css classes .ui-datepicker-month, .ui-datepicker-year , with !important declarations.

    Still I like more the look and feel of the default form datepicker included in the Enfold theme (shortocode), so if there’s any further development in this regard to imporve the Gravity forms compatibility with ENFOLD, I’d be happy to upgrade.

    Below the css code I’ve implemented.

    Thanks,
    Miquel

    

.ui-datepicker-month, .ui-datepicker-year {
		display: inline-block !important;
		margin-bottom: 1px !important;
		padding: 1px 1px !important;
		}
.ui-datepicker-month {
		width: 70px !important;
		}
.ui-datepicker-year  {
		width: 45px !important;
	}
    January 20, 2015 at 8:32 am #382313
    Ismael

    Hey!

    Glad you figured it out. Thanks for sharing. :)

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Gravity forms Datepicker issue’ is closed to new replies.