Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • January 14, 2014 at 7:34 pm #209638
    Jomay111

    I have this site with a GravityForm http://update.weborbis.de/testform
    I use the css classes like gf_left_half and gf_right_half but it does not show up right.
    The name fields in the 3 row are styled like this, but still they are small?
    The e-mail and website fields are just small….
    and changing the size make no different?

    Does this Theme not support GravityForms?

    Best regards,
    Jomay

    • This topic was modified 10 years, 10 months ago by Jomay111.
    January 15, 2014 at 9:50 am #209947
    Dude

    Hi Johannes!

    Please insert following css code into the quick css field to change the input field styling

    
#top .gform_body input[type="text"] { width: 100%; }

    Regards,
    Peter

    January 15, 2014 at 10:46 am #209970
    Jomay111

    Hi Peter,
    almost perfect;) only the date field are now not showing right, can you help with this one too?
    The icon jump to second row and the size can not be 100%….
    Best Regards,
    Jomay

    • This reply was modified 10 years, 10 months ago by Jomay111.
    January 15, 2014 at 4:56 pm #210099
    Yigit

    Hi!

    Please try adding following code to Quick CSS as well

    li#field_15_4 .gfield {
float: left; 
}

    Best regards,
    Yigit

    January 16, 2014 at 10:30 am #210602
    Jomay111

    Hi Yigit,
    I have tried setting your css into the Quick CSS field, but no changes?

    Then I have set this code, to see if I could target the right field, it works an make a red border line.
    .gform_wrapper input.datepicker.datepicker_with_icon {border: 1px solid red!important;}

    But getting the right size and left align back?

    Best Regards,
    Jomay

    • This reply was modified 10 years, 10 months ago by Jomay111.
    January 16, 2014 at 11:17 am #210615
    Dude

    Hi!

    Try following css code to resize the datepicker field

    
#top #wrapp_all .gform_body input.datepicker {
width: 20%!important;
}

    and set another width value if necessary.

    Best regards,
    Peter

    January 16, 2014 at 11:47 am #210632
    Jomay111

    Nope, does not change?

    January 16, 2014 at 12:59 pm #210672
    Dude

    Hey!

    What happens if you try

    
#top .gform_body input[type="text"].datepicker {
width: 20% !important;
}

    Cheers!
    Peter

    January 16, 2014 at 2:49 pm #210692
    Jomay111

    Thank you Peter,
    now the size fit, but the icon still jump to next row?
    I have tried to use this: http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples#Date_.E2.80.93_Icon_Image_.28Datepicker_Option.29
    but I cannot get right?

    Best Regards,
    Jomay

    January 17, 2014 at 3:29 pm #211230
    Yigit

    Hey!

    Do you mind creating a temporary admin login and posting it here privately so we can take a look?

    Best regards,
    Yigit

    January 17, 2014 at 7:31 pm #211346
    Jomay111
    This reply has been marked as private.
    January 20, 2014 at 9:35 am #212138
    Dude

    Hey!

    Please try following code

    

#top .gform_body input[type="text"].datepicker {
width: 20% !important;
display: inline-block;
}

    Cheers!
    Peter

    February 14, 2014 at 5:24 pm #224066
    Jomay111

    It works, now it looks nice;)
    I used the last code from Dude, and now it rocks.

  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘GravityForms styling?’ is closed to new replies.