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

    Configurable list widget - static text not displaying in Internet explorer

    Asked by rake879 on May 30, 2017 at 01:45 AM

    Hi Team,

     

    I am using configurable list widget and the static text doesn't display in internet explorer . i am using ie11.

     

    it is working properly in google chrome . For more details refer to below image 

     

  • Profile Image
    JotForm Support

    Answered by Charlie on May 30, 2017 at 03:33 AM

    Hi,

    The static text here for rows 2 to 4 are actually generated by a custom CSS code that you placed inside the widget. Unfortunately, IE11 might be too old or is not anymore up to date to read more structured or newer CSS codes. And it is quite known that IE browsers are somewhat have a different way of rendering HTML and CSS codes. 

    I've cloned your form and check the existing CSS code, I created a simple form here: https://form.jotformpro.com/71491414135956. See if that works on your IE11 browser, in my case, it works. 

     

    Here's the full CSS code on my sample form: 

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    .remove {

        display: none;

    }

     

    col1 {

    margin: 0px 0;

    min-width: 150px;

    }

    /*Hide all static text on column 1*/

    #list > tbody > tr > td.col1 > .staticText {

    display: none !important;

    }

    /*Change text in row 1 column 1*/

    #list > tbody > tr:nth-child(2) > td.col1::after {

    content: "Strategy";

    display: inline-block !important;

    }

    /*Change text in row 2 column 1*/

    #list > tbody > tr:nth-child(3) > td.col1::after {

    content: "Definition";

    display: inline-block !important;

    }

    /*Change text in row 3 column 1*/

    #list > tbody > tr:nth-child(4) > td.col1::after {

    content: "Delivery";

    display: inline-block !important;

    }

    /*Change text in row 4 column 1*/

    #list > tbody > tr:nth-child(5) > td.col1::after {

    content: "Transition";

    display: inline-block !important;

    }

     

    You can see I added comments on each code block in what it does. You can modify based on your own preference. Basically, the code above should work on any browser, including IE11.

    Let us know if that helps.