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

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.

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.

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. 

 

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.

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.

 

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.