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

  • ashtutors
    Asked on November 9, 2015 at 6: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.

  • beril JotForm UI Developer
    Replied on November 9, 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.

    How can I make all the input boxes the same size? Image 1 Screenshot 40

     

    2) Paste the code below to your custom CSS.

    .geoComplete {

    width: 305px !important ;

    height : 30px !important;

     

    }

    How can I make all the input boxes the same size? Image 2 Screenshot 51

     

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

    How can I make all the input boxes the same size? Image 3 Screenshot 62

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

  • ashtutors
    Replied on November 9, 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

  • beril JotForm UI Developer
    Replied on November 9, 2015 at 2: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.

  • ashtutors
    Replied on November 9, 2015 at 2: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

    How can I make all the input boxes the same size? Image 1 Screenshot 20

  • beril JotForm UI Developer
    Replied on November 9, 2015 at 2: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.

    How can I make all the input boxes the same size? Image 1 Screenshot 20

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

    Thank you.

  • beril JotForm UI Developer
    Replied on November 9, 2015 at 3: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;

    }

    How can I make all the input boxes the same size? Image 1 Screenshot 20

    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.

  • ashtutors
    Replied on November 9, 2015 at 5: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

  • Kevin Support Team Lead
    Replied on November 9, 2015 at 8: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 : 

    How can I make all the input boxes the same size? Image 1 Screenshot 40

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

    How can I make all the input boxes the same size? Image 2 Screenshot 51

    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;

    }

    How can I make all the input boxes the same size? Image 3 Screenshot 62

    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.

     

  • ashtutors
    Replied on November 10, 2015 at 2: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

    :)

  • beril JotForm UI Developer
    Replied on November 10, 2015 at 3: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.

  • ashtutors
    Replied on November 10, 2015 at 9: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

  • David JotForm Support Manager
    Replied 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.