7 Replies Latest reply on Aug 25, 2014 1:30 PM by fandorin

    errai ie8 and css styles in template

    fandorin Newbie

      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?