My form is not responsive on Internet explorer

  • fortekfwwd
    Asked on March 14, 2016 at 9:54 AM
    ) Form size in IE11. The form doesn't get the responsive layout in IE11, and only fills the half of the container div. In all other browsers, it is resized correctly to fit the container. 
  • beril JotForm UI Developer
    Replied on March 14, 2016 at 10:48 AM

    I've tested your form on Internet Explorer and I am able to reproduce the same issue that you're having.

    Here is how it works on Chrome:

    My form is not responsive on Internet explorer Image 1 Screenshot 30

    Here is how it word on Internet Explorer:

    My form is not responsive on Internet explorer Image 2 Screenshot 41

    To solve that issue, I will add CSS code on your cloned form and get back to you soon.

  • beril JotForm UI Developer
    Replied on March 16, 2016 at 8:06 AM

    Hi again,

    I've tested your form with different CSS codes. However, none of them worked as expected on Internet Explorer.

    First of all, I've added the CSS code below:

     

    #input_8 {

        width : 605px !important;

    }

    #input_3 {

        width : 605px !important;

    }

    #first_9 , #last_9 {

        display : inline-block

        !important;

        width : 289px !important;

    }

    #last_9 {

        margin-left : 25px;

    }

    #input_5 {

        width : 605px !important;

    }

    #cid_9 span.form-sub-label-container {

        width : 268px !important;

    }

    #input_14 {

        width : 605px !important;

    }

    #cid_11 span.form-sub-label-container {

        width : 213px !important;

    }

    #input_11_area {

        width : 210px !important;

    }

    #input_11_phone {

        width : 375px !important;

    }

    #input_10_postal {

        width : 250px !important;

    }

    #input_10_addr_line1 {

        width : 605px !important;

    }

    #input_10_city {

        width : 290px !important;

        margin-right : 10px !important;

    }

    #input_10_postal {

        width : 290px !important;

        margin-right : 100px !important;

    }

    #cid_10 span.form-sub-label-container {

        width : 255px!important;

    }

    #input_10_state {

        width : 283px!important;

        margin-left : 60px;

    }

    #input_10_country {

        width : 283px!important;

        margin-left : 60px;

    }

    #input_15 {

        width : 605px !important;

    }

    #sublabel_10_country {

        margin-left : 60px;

    }

    #sublabel_10_state {

        margin-left : 60px;

    }

    It didn't work on Internet Explorer properly. Then I've changed the CSS code but I couldn't found a solution.

    Finally, I've found a windows PC then I've tried to solve your issue on internet explorer. I realized that we can solve your problem easily by changing width of textbox on desiner.

     

    Here is how to do that:

    First of all, click on designer and change the textbox width as you see below:

    My form is not responsive on Internet explorer Image 1 Screenshot 30

    After that, we would appreciate it if you could just add the CSS code below:

     

    #first_9 , #last_9 {

        display : inline-block !important;

        width : 315px !important;

    }

     

    #cid_9 span.form-sub-label-container {

        width : 300px !important;

    }

    At that time, it will work as expected.

    Here is how it works on interner explorer:

    My form is not responsive on Internet explorer Image 2 Screenshot 41

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