errai ie8 and css styles in template

[fandorin]

I have created a small app that uses bootstrap and gwt/errai. The application consists only of a single html template that is used as a custom component (@Templated).

The buttons, inputs and labels are injected via @Inject and annotated with the @DataField annotation. The strange thing is that the application looks fine in chrome, firefox and all Internet Explorer versions starting with version 9.

But not in "IE8". In IE8 the buttons, inputs and labels look like the css styles were not applied. If I open the original html template page directly in IE8 than the page looks great, all styles are applied.

In IE8 I checked the html structure with the included development tools and I can see that the styles are there but IE8 does not use them.

Here a snipped from my template:

<div class="col-md-4">

  <button id="send" name="send" class="btn btn-primary" data-field="send">Send</button>

</div>

Here the html code from ie8 developer tools:

<DIV class="col-md-4">

  <BUTTON aria-haspopup="" aria-disabled="" accessKey="" aria-hidden="" aria-expanded=""

  id=send lang="" aria-busy="" language="" dataSrc="" aria-checked="" aria-readonly=""

  aria-secret="" class="gwt-Button" title="" role="" dataFld="" tabIndex=0

  aria-relevant="" aria-live="" aria-labelledby="" aria-pressed="" aria-invalid=""

  aria-valuenow="" aria-selected="" aria-owns="" aria-valuemax="" dataFormatAs=""

  aria-valuemin="" aria-controls="" aria-flowto="" aria-required=""

  aria-describedby="" aria-activedescendant="" aria-multiselectable="" name=send

  type=button data-field="send" implementation="null" class="btn btn-primary"

  __eventBits="1">Send

  </BUTTON>

</DIV>

The styles btn and btn-primary are there!

I did a test and created a small init method annotated with @PostConstruct that adds the styles to the widgets manually. And here it works. IE8 uses the css styles.

In another test I opened the html code of my app in IE8 development tools, looked up a button and removed an added again a css class. After adding it again IE8 used the style.

Is this a known errai/gwt/IE8 Bug?

Is there a workaround?

Is it possible to force IE8 to rerender the page?

I have to develop for IE8, any recommandations?

[ddadlani]

Hi fandorin,

Could you give us a bit more detail about your problem? Do you have a demo that we could run to reproduce the problem?
Also, have you tried running errai-tutorial? Does that work fine or does the same styling problem occur?

Regards,

Divya

[fandorin]

Hello Divya,

here you can download my sample:

https://github.com/holgerdunst/errai-demo

Please compare it in chrom and ie8.

Regards,

Fandorin

[csa]

Hi Fandorin,

It took a team effort to solve this IE puzzle but we finally did it. We just tested your demo with the latest 3.0.3-SNAPSHOTs and all the styles got applied now in IE8. So, you simply need to upgrade to 3.0.3-SNAPSHOT.

Of course, you might still experience some rendering differences in IE8.  You already use html5shiv and response.js so it should at least work and the styles should be correct now.

Cheers,

Christian

[fandorin]

Hello Christian,

I updated my current project with the latest snapshot and all styles are correct now.

A big thank you to the whole erray team!!!

Regards Holger (a.k.a Fandorin)

[fandorin]

Sorry Christian,

I have found some other issues for IE8. I have uploaded my project to github. Please have a look at https://github.com/holgerdunst/errai-demo

• The style attribute on an element in a template does not work.
  • See file App.html  --> style="display: none". In IE8 the element is visible in other browsers it is not.
• CSS classes on a span element do not work.
  • See InfoIconWidget.html. It is a span element that wrappes an "info" icon. If the mousepointer is over the icon then a popover is shown.
  • In IE8 the icon is not visible. The popover is shown but the css styles are not working.

Regards,

Holger

[ddadlani]

Hello Holger,

We found the following workarounds for your issues:

• For your style attribute problem, simply set the element's visibility to false in the @PostConstruct method of your app.
• For the CSS classes issue, you can add the classes for your span directly in App.html as follows:

        <label class="col-md-4 control-label" for="message">Textmessage<span id="messageInfo" class="glyphicon glyphicon-info-sign"></span></label>
    
       Once you make that change, you can then reference your <span> in InfoIconWidget class by adding "@Templated("App.html#messageInfo") at the beginning, and it should render correctly.

Regards,
Divya

[fandorin]

Hello Divya,

thanks for the workarounds. I hope you can fix these issues in errai.

Regards,

Holger