Need to stylize GeoComplete CSS to match rest of form

  • Profile Image
    unruhfurniture
    Asked on August 09, 2017 at 09:16 AM

    I added the GeoComplete Widget to my form (a great widget!) but I need to stylize it the same as the rest of the form. Can you look at the form and tell me what CSS I should put in the GeoComplete Widgest Advanced Options?

     

    Thanks!

    Sam

  • Profile Image
    Chriistian
    Answered on August 09, 2017 at 11:31 AM

    Please try to inject this custom CSS code to the widget to change the design of the text box.

    #geocomplete {

        height: 50px;

        border: 1px solid rgb(204, 204, 204);

        background-color: #fafafa;

        font-size: 20px;

    }

    To inject the custom CSS code to the widget, just open the widget wizard and go to the Custom CSS tab.

    After injecting the custom CSS code to the widget, please try to inject this custom CSS code to your form.

    #customFieldFrame_34 { 

     height:60px !important;

    }

    To inject custom CSS code to your form, just follow the instruction provided in this guide: How to Inject Custom CSS Codes.

     

    Do let us know if you need further assistance.

  • Profile Image
    unruhfurniture
    Answered on August 09, 2017 at 08:43 PM
    Thanks so much! I made a few more tweaks to the site and form, and now I
    need to adjust that style a little more. Would you check it out here:
    https://www.remindclient.com/
    And tell me how to make the placeholder text the same as the rest of the
    form, and make the width of the field the same (the width overflows right
    now).
    Thanks!
    Sam
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    BJoanna
    Answered on August 10, 2017 at 01:45 AM

    Add this CSS code to the GeoComplete widget:

    #geocomplete {

        width: 657px!important;

    }

    Your embedded form should look like this after you add the CSS code.

  • Profile Image
    unruhfurniture
    Answered on August 10, 2017 at 10:43 AM
    Thanks! That made it the same size on dekstop, but it is still overflowing
    ...
  • Profile Image
    BJoanna
    Answered on August 10, 2017 at 12:07 PM

    It seems that I was looking at the wrong form. I was checking the form on this page https://www.remindclient.com/

    I am trying to find the CSS code to fix the overflowing issue. I will update you via this thread once I find the solution. 

  • Profile Image
    BJoanna
    Answered on August 10, 2017 at 12:54 PM

    My colleague Chriistian helped me to resolve the overflowing issue. Please add this CSS code to the Form Custom CSS:

    #customFieldFrame_34 {

        min-height : 60px !important;

    }

    How to Inject Custom CSS Codes

    To change the width of the widget add this CSS code to the widget CSS field:

    #geocomplete {

       max-width: 956px !important;

    }

    Hope this helps to solve the issue.

  • Profile Image
    unruhfurniture
    Answered on August 10, 2017 at 01:43 PM
    Thanks! Can you tell me how to make the placeholder text the same as the
    rest of the form?
    *Sam Unruh*
    Owner, Unruh Furniture
    cell: 816.808.5259
    ...
  • Profile Image
    liyam
    Answered on August 10, 2017 at 02:06 PM

    You can try adding this CSS code into your widget:

    #geocomplete::-webkit-input-placeholder {
      font-family: Arial !important;
      font-size: 15pt;
    }  

    #geocomplete::-moz-placeholder {
      font-family: Arial !important;
      font-size: 15pt;
    }  

    #geocomplete::-ms-input-placeholder {
      font-family: Arial !important;
      font-size: 15pt;
    }  

    If you have questions, please let us know.