IE8 only shows css content after event fired

Question

I have quite an issue with the :after selector in css on IE8:

Relevant code:

.required:after {
     content:" *";
     color: red;
}

<table id="loss-theft-case">
    <tbody>
        <tr>
            <td width="250px" colspan="2" class="required">
                <g:message code="losstheft.case.naam.label"/>
            </td>
            <td width="175px" colspan="2">
                <g:textField 
                    class="bigInput border_box naam_disableable x-item-disabled" 
                    name="surname" id="surnameCreateCase" value="${customer.surname}" 
                    readonly="readonly"/>    
            </td>
        </tr>
<!-- ...  -->

<div id="loss-theft-case-dialog" style="display:none">
    <g:include view="lossTheft/createLossTheftCase.gsp"/>
</div>

var lossTheftDialog;

function createLossTheftCaseDialog() {

    // Define dialog to be shown.
    lossTheftDialog = $("#loss-theft-case-dialog").dialog({
        autoOpen: false,
        dialogClass: "no-close",
        minWidth: 500,
        minHeight: 375,
        modal: true,
        resizable: false,
        open: focusTabTimeout,
        title: "Aanmaken verlies & diefstal case",
        buttons: {
            "Cancel": {
                id: "create-case-dialog-cancel-btn",
                text: "Annuleren",
                click: function () {
                    clearMessages();
                    lossTheftDialog.dialog("close");
                    log(SUBMIT_CANCEL_LOSSTHEFT_CASE);
                }
            },
            "OK": {
                id: "create-case-dialog-ok-btn",
                text: "Aanmaken",
                click: function () {
                    createCase();
                    log(SUBMIT_LOSSTHEFT_CASE);
                }
            }
        }
    }).css("font-size", "13px");

(and this code opens the dialog:)

lossTheftDialog.dialog("open");

Upon first-load of the dialog the red * is not shown. If you close and reopen the dialog the red * is shown. Other dialogs built a similar way suffer from the same issue.

Additional details:
When you click on one of the required fields the * magically appears. If you close the dialog (by clicking on the 'cancel' button), the very moment before the dialog disappears the *'s are shown as required. If you tab from one field to another all of the *'s appear as well.

Further info:
I can't link to a jsfiddle because that does't seem to work in IE8. I tried the above code but that doesn't gives a * at all in IE8. If I try it in the tryit editor it seems to work.

So, it seems to be an issue that is specific to a dialog in our project but I can't seem to isolate it. I googled and stack overflowed and tried various things all day now but didn't find the solution.

One path was using jQuery 'trigger' to simulate the clicking but alas.

Any pointers/hints/answers are greatly appreciated :)

jquery version: 1.11.1 (min)
jquery UI version 1.10.4

I do use <!DOCTYPE html> as first line in the page.

This is how the dialog shows up.

This is how it should look.

This is after clicking some 'required' fields.

This is how the dialog shows up initially: (first picture)

This is how it should look (and appears after closing & opening the dialog). (second picture)

This is the dialog after clicking some required fields: (third picture)

Edit: (reply on comment) The dialog is not meant to be dynamic; it should just show the required fields as required (with a red *) upon first load, but doesn't, and does so if you close and reopen the dialog or click on one of the required fields.

Update: Other screens which suffer from the same issue don't get 'cured' by opening & closing one screen.

Fiddles work in Internet Explorer 8, though *building* a Fiddle in IE 8 can be pretty difficult. I would suggest you build your Fiddle in a modern version of IE (or whatever browser you have available) and then share the /show URL. This issue sounds to me like a render-invalidation issue. I have seen similar issues. — Sampson, Dec 17 '14 at 19:36
Try something that would force the element to be redrawn. For instance, set the `background-color` of the `.required` when you hover over it. This may trigger the dynamic content to be displayed. — Sampson, Dec 17 '14 at 19:51

score 0 · Accepted Answer · edited May 23 '17 at 12:20

I found it :D

based on the usefull hints of Jonathan I googled a bit further and found: this post.

I wrote a little help method:

function refreshRequireds(){
    $(".required").parents('tr').addClass('z').removeClass('z');
}

and every time I open a dialog I added this line:

window.setTimeout(refreshRequireds,100);

And now the *'s are (after a mere delay of 100 ms) shown :)))))

I hope others may find this post usefull...

S.

IE8 only shows css content after event fired

1 Answers1