What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I make all the input boxes the same size?

    Asked by ashtutors on November 09, 2015 at 06:14 AM

    I've just put a new 'location widget' onto the first page of my form.

    How can I make it exactly the same height, width and background colour etc... as all the other boxes, which are currently equal in size?

    Many thanks.

    Page URL:
    https://form.jotformeu.com/52931335660353

    size same all Make
  • Profile Image
    JotForm Support

    Answered by beril on November 09, 2015 at 10:21 AM

    Hi,

    You can add the CSS code to your widget.

    Here is how to do this:

    1) Click on wizard icon on widget.

     

    2) Paste the code below to your custom CSS.

    .geoComplete {

    width: 305px !important ;

    height : 30px !important;

     

    }

     

    In addition to that you can change the width and height from properties of widget.

    If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

  • Profile Image

    Answered by ashtutors on November 09, 2015 at 10:58 AM

    Many thanks Beril - I really appreciate your input.

    I've done as you've suggested, and even though the box has gone larger, its still the wrong size, outline colour and background colour.

    Have I done something wrong?

    Geoff

  • Profile Image
    JotForm Support

    Answered by beril on November 09, 2015 at 02:06 PM

    Hi Geoff,

    You are kindly welcome. I fixed the width and height issue.on your account. However, I couldn't find a solution for background color of your field.

    Let me try to figure out how to change it.

    If there is an update I will inform you.

    Thank you.

  • Profile Image

    Answered by ashtutors on November 09, 2015 at 02:27 PM

    I do appreciate your help Beril.

    I've checked the form and it doesn't look any different - the box is the wrong size and the end is cut off - just as it was before.

    I've attached a screen shot to show you.

    Geoff

  • Profile Image
    JotForm Support

    Answered by beril on November 09, 2015 at 02:46 PM

    Hi,

    Sorry for inconvenience this may caused you. I fixed the issue but I forgot to save the changes that I made.

    Now it is working.

    I will inform you on this thread when I solve the background color issue.

    Thank you.

  • Profile Image
    JotForm Support

    Answered by beril on November 09, 2015 at 03:37 PM

    Hi again,

    I found a solution for your background color.

    Please, paste the code below to your custom CSS.

    input.geoComplete{

    background: #ececec !important;

    outline-color: #5f1682 !important;

    }

    I hope these methods will work for you.

    Do let us know if you are still having the same issues. We will be glad to assist you.

  • Profile Image

    Answered by ashtutors on November 09, 2015 at 05:13 PM

    Thanks Beril. We're getting closer!

    The box is now the correct size.

    The background colour is similar - but not identical. The purple outline is still missing. And the size of the box doesn't fit on a tablet. the others are mobile responsive but this one is a different size on mobile.

    I'm not ungrateful - I appreciate the help. Surely there's an easy way to do this, otherwise how come all the boxes are all the same when it was first set up?

    Geoff

  • Profile Image
    JotForm Support

    Answered by Kevin_G on November 09, 2015 at 08:29 PM

    Hi Geoff,

    Thank you for contacting us.

    To achieve that you want, follow these steps :

    Go to Designer and paste the next CSS code : 

    #cid_148 iframe {

        width : 100% !important;

    }

    You will find the Designer here : 

    Click on the CSS tab, paste the CSS code at the end and save the changes  : 

    Now, click on the wizard icon, on the widget, on the Custom CSS tab, replace the code with this : 

    input.geoComplete {

        background:#f6f6f6 !important;

        border:1px solid #CAA8DA !important;

    }

    You can take a look to my sample form here : 

    https://form.jotform.com/53127786602963

    I think this field require more CSS code due to it is a widget.

    I hope that helps.

    Let us know if it works , if not ,we will be glad to assist you.

    Regards.

     

  • Profile Image

    Answered by ashtutors on November 10, 2015 at 02:39 AM

    That's worked really well for nearly all my issues! Many thanks Kevin (and Beril too!).

    One issue remaining. On a mobile phone this one box is still the wrong size. On my iphone it looks way too long and falls off the end of the form. All the other boxes are identical in length.

    Thank you again for this free support!

    Geoff

    :)

  • Profile Image
    JotForm Support

    Answered by beril on November 10, 2015 at 03:12 AM

    Hi Geoff,

    On behalf of my colleague @kelvin involved, you are kindly welcome. :) We are very glad to hear that the issue has been resolved for you.

    If we can be of any further assistance, please let us know. We will be happy to assist you.

  • Profile Image

    Answered by ashtutors on November 10, 2015 at 09:45 AM

    Just one thing still to be sorted.

    On a mobile phone, in portrait mode the input box is still too long - it goes beyond the border of the form.

    Can we do anything to fix this?

    Many thanks.

    Geogg

  • Profile Image
    JotForm Support

    Answered by BDAVID on November 10, 2015 at 12:42 PM

    @ashtutors, we will move your last question to a separate thread to further assist you with the mobile viewing issue: http://www.jotform.com/answers/701804

    If you need anything else please open a new thread, we will be glad to assist you.