Configurable list widget - static text not displaying in Internet explorer

  • Profile Image
    rake879
    Asked 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
    Charlie
    Answered 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.