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

    Different static text in each row of Configurable list not appearing in IE

    Asked by NSF_FrictionMaterial on March 03, 2016 at 10:21 AM

    Hello all,

     

    My form is here: https://form.jotform.com/NSF_FrictionMaterial/P458_New_Facility

     

    At one point I need to ask for a Shop's business hours.  I thought the best method for this would be the Configurable List.  I made a Configurable List with a different static text value (Sunday, Monday, Tuesday, etc.) on each line and then specified that the Configurable List could have no more and no less than 7 lines.  I used the information here to write the CSS allowing different static text to appear on each line: http://www.jotform.com/answers/507997-Help-adding-different-static-text-for-each-row-on-the-Configurable-List-Widget

     

    The Configurable List shows just as I want it to when I view the form through Chrome:

     

    But, when it's viewed through IE (I'm using IE11), only the Sunday static text is displayed:

     

    Is there a way to fix this?  Or a better way to ask for business hours?

     

    I've been experimenting with Time Picker, other lists, and the basic Time quick tool.  But all of them have problems replicating what I want to do (mostly getting everything to line up correctly).

     

    Any help you can provide is appreciated.

     

    Thanks.

    Page URL:
    https://form.jotform.com/NSF_FrictionMaterial/P458_New_Facility

    different static configurable list configurable
  • Profile Image
    JotForm Support

    Answered by beril on March 03, 2016 at 11:38 AM

    I am able to reproduced the same issue that you're having on Internet explorer. The content does not visible expect Sunday text.

    However, it is working fine on Google chrome, Safari and FireFox on my side.

    I am using browser stack now. I will test it with real IE browser and try to figure out cause of it. Then I will get back to you as soon as possible.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 03, 2016 at 03:44 PM

    Seems like your reply did not reach this thread, please open this link in your web browser and post your reply: http://www.jotform.com/answers/786474

     

  • Profile Image

    Answered by NSF_FrictionMaterial on March 03, 2016 at 04:18 PM

    Oops - I guess my reply didn't make it.  I was just saying I'm glad you replicated the problem and that any help is appreciated.

  • Profile Image
    JotForm Support

    Answered by Kevin_G on March 03, 2016 at 05:20 PM

    No worries, I tested your form on Internet Explorer and I encountered the same issue, but I found it is a conflict between the CSS and Internet Explorer, so it is not loading the CSS code properly and this is why it is only hiding the text instead of showing it as it is in Chrome and other browsers. 

    I was unable to find a way to fix it, however, I will ask to my colleague if she found a way to fix this issue and we will update you here soon.

     

  • Profile Image
    JotForm Support

    Answered by beril on March 03, 2016 at 10:13 PM

    Finally I did it. =) Now it is also working on Internet Explorer.

     

    If you update the code as you see below it will work properly on Internet Explorer.

    tr+tr >:first-child :after {

    visibility: visible;

    content: "Sunday";

    }

    tr+tr+tr>:first-child :after {

    visibility: visible;

    content: "Monday";

    }

    tr+tr+tr+tr+tr>:first-child :after {

    visibility: visible;

    content: "Tuesday";

     

    }

    tr+tr+tr+tr+tr >:first-child :after {

    visibility: visible;

    content: "Wednesday";

    }

    tr+tr+tr+tr+tr+tr >:first-child :after {

    visibility: visible;

    content: "Thursday";

     

    }

    tr+tr+tr+tr+tr+tr+tr >:first-child :after {

    visibility: visible;

    content: "Friday";

    }

    tr+tr+tr+tr+tr+tr+tr+tr >:first-child :after {

    visibility: visible;

    content: "Saturday";

    }

     

    In addition to that please remove the static text as you see below:

     

    There is an alternative way to solve that problem. I also want to show that solution. First of all, delete the CSS code and add the CSS code below:

     

    .checkbox, .radio {

    margin: 3px 0;

    min-width: 70px;

    }

    .col1 {

    margin: 3px 0;

    min-width: 100px;

    }

    .col2 {

    margin: 3px 0;

    min-width: 200px;

    }

    tr:nth-child(2) .col1:before {

        content: "Sunday";

    }

    tr:nth-child(3) .col1:before {

        content: "Monday";

    }

    tr:nth-child(4) .col1:before {

        content: "Tuesday";

    }

    tr:nth-child(5) .col1:before {

        content: "Wednesday";

    }

    tr:nth-child(6) .col1:before {

        content: "Thursday";

    }

    tr:nth-child(7) .col1:before {

        content: "Friday";

    }

    tr:nth-child(8) .col1:before {

        content: "Saturday";

    }

     

    After That, delete the static text as you see below:

     

    Both of them are working properly on Internet Explorer.

    Here is how it works on Internet explorer:

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