Formatting the address fields: responsiveness and dropdown.

Hi lovely supporters, one thing I've not been able to find on the forum is how to correctly format the composite address field. I found this https://www.jotform.com/answers/1418723-Address-Placing-City-State-Zip-fields-on-one-line, which puts the last three fields on one line and is very helpful. Right now I have the following questions:

1) The method described above seems to shrink the Address Line 1 field on screens smaller than 689px. How do I avoid this and keep it responsive?

2) How do I set the State dropdown border radius? (This seems to be hard to find in all of the Jotform dropdowns, I wish the default could be to match the textbox border style and colors!)

Thanks in advance!

To fix this, remove the following CSS to your form (line 8 to 11).

.form-address-table tr:nth-of-type(4) {
    display : inline-block;
}

and add the following CSS,

.form-address-table tr:nth-of-type(1) td {
  width: 100%;
}

The border-radius is probably showing on a Mac OS browser (Chrome or Safari) because that is the default appearance of the select element.

To fix this, add the following CSS to your form.

#input_10_state {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-border-radius: 0px;
  background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
  background-position: 95% 50%;
  background-repeat: no-repeat;
  background-size: 12px;
}

Cloned Form URL: https://form.jotform.com/81946277921972

Let us know if you need further assistance.

Okay, the dropdown formatting works beautifully. Thank you!

I updated both address line 1 and line 1 fields to match widths of 100%. Now my city-state-zip fields will not stay on one line. I've played around with it a bit and can't seem to find a way back.

Inject this additional CSS to your form to fix that.

#cid_10 table tr:nth-child(3) {
  width: 75%;
}

#cid_10 table tr:nth-child(4) {
  width: 25%;
}

#cid_10 table tr:nth-child(4) td {
  width: 100%;
  min-width: unset;
}

#input_10_postal {
  width: 100% !important;
}

.form-address-table tr:nth-of-type(2) td {
  width: 100%;
}

@media (min-width: 500px) {
  #input_10_postal {
    max-width: 62px;
  }
}

Let us know if you need further assistance.

Thanks, but that doesn't seem to do the trick. Any ideas?

I am working on your requirement but it is taking some time. I will get back to you on this soon. 

Please take a look at the following cloned form where I have edited the existing custom css code and added few new css code as well and see if it works as expected:   https://form.jotform.com/81956158257973 

If it works fine, I would suggest you to please delete all the existing custom css code of your form and inject the following custom css code:

.form-dropdown {

    padding : 2px;

    font-size : 14px;

}

.form-label.form-label-left {

    width : 150px;

}

.form-line-column.form-col-3 {

    padding-left : 18px;

}

#id_2 {

    padding-bottom : 5px;

}

#id_9 {

    padding-bottom : 3px;

}

#id_13 {

    padding-top : 3px;

}

#label_5 {

    width : fit-content;

}

#label_11 {

    width : fit-content;

}

#progressBar {

    display : none;

}

.progressBarSubtitle {

    display : none;

}

#input_10_state {

    -webkit-appearance : none;

    -moz-appearance : none;

    -webkit-border-radius : 0px;

    background-image : url("https://image.flaticon.com/icons/svg/60/60781.svg");

    background-position : 95% 50%;

    background-repeat : no-repeat;

    background-size : 12px;

}

@media (min-width: 500px){

    #input_10_postal {

        max-width : 50px;

    }

}

.form-address-table tr:nth-of-type(3) {

    display : inline-block;

}

.form-address-table tr:nth-of-type(4) {

    display : inline-block;

}

#input_10_state {

    margin-left : 14px;

}

#input_10_postal {

    margin-left : 18px;

}

#input_10_city {

    width : 80px !important;

}

#input_10_state {

    width : 110px !important;

}

#input_10_postal {

    width : 50px !important;

}

@media only screen and (max-device-width: 480px){

    #input_10_city {

        width : 65px !important;

    }

    #input_10_state {

        width : 110px !important;

    }

    #input_10_postal {

        width : 60px !important;

    }

}

Hope this helps.

Do get back to us if you have any questions.

Hi, that seems to be an earlier version of the form. I was able to fix it using the following to format the address section:

.form-address-table td {

    display : inline-block;
    min-width : 90px;

}

.form-address-table tr:nth-of-type(1) td {

    width : 100%;

}

.form-address-table tr:nth-of-type(2) td {

    width : 100%;

}

.form-address-table tr:nth-of-type(3) {

    display: inline-flex;
    padding-right:3px;

}

.form-address-table tr:nth-of-type(4) {

    display: inline-block;

}

.form-dropdown {

    padding : 2px;
    font-size : 14px;

}

.form-dropdown.form-address-state {

    width : 110px !important;
    height : 25px !important;
    background-color : #fff;
    border : 1px solid #ccc;
    border-radius : 0 !important;
    box-shadow : 0 1px 2px #eee inset;

}

#cid_10 table tr:nth-child(3) {

    padding-right: 3px;

}

#cid_10 table tr:nth-child(4) {

    width : 25%;
    display:inline-block;

}

#cid_10 table tr:nth-child(4) td {

    width : 100%;
    min-width : unset;

}

Can you please confirm if the issue has been resolved?

We will wait for your reply.

Thank you.

Yes, the issue is resolved. Thanks!