.NETASP.NETInfragistics

Infragistics igDialog causing SysFader in IE8. Looks harder than it is!

Some time ago I was working on an application at a customer of mine, and all went well.
But in the end the business came to me and said, “yeah, you know, we said it only needed to be firefox complient, but we have seen that there are still a lot of users who use IE8”.

My first reaction was, “njeah, oké, whatever, we will take a look but my guess is that it will also work in IE8, except on some minor layout issues”.
I opened the webapp, all was well on the homepage, lets go to the second page. BAM, major error. A SysFader error.

SysFader

In no time I discovered the problem was the igDialog. But the strange thing was, I had some other pages where I did just the same, and there it was working like a charm.

Here is my code before the fix.

<div class="row">
   <div id="WhosWhoDetailTable">
      <div class="col-xs-3 col-md-3 col-md-offset-1">
         <img src='' class='WhosWhoDetailPic' data-whoswhoKey='@Model.Image' alt='notFound' class='WhoswhoDetailRow WhosWhoDetailHeaderRow' />
      </div> 
      <div class="col-xs-7 col-md-7"> 
         <div class="row"> 
            <span data-whoswhoKey= '@Model.FirstName' class='WhoswhoDetailRow WhosWhoDetailHeaderRow'> 
            </span> 
            <span data-whoswhoKey= '@Model.LastName' class='WhoswhoDetailRow WhosWhoDetailHeaderRow'>
            </span>
         </div>
         @foreach (var column in Model.GetColumns()){
            <div class="row">
               @column.HeaderText: <span class='WhoswhoDetailRow' data-whoswhoKey='@column.Key.ToUpper()' />
            </div>
         }
      </div>
   </div>
</div>
$("#detail").igDialog({ state: "closed", modal: true, height: 300, width: 660, resizable: false, draggable: false, headerText: JSTranslations.Menu_WhosWho });

And after a while I discovered the problem. Here is my code after the fix. Can you find the difference?

<div class="row"> 
   <div id="WhosWhoDetailTable"> 
      <div class="col-xs-3 col-md-3 col-md-offset-1">
         <img src='' class='WhosWhoDetailPic' data-whoswhoKey='@Model.Image' alt='notFound' class='WhoswhoDetailRow WhosWhoDetailHeaderRow' />
      </div>
      <div class="col-xs-7 col-md-7">
         <div class="row">
            <span data-whoswhoKey= '@Model.FirstName' class='WhoswhoDetailRow WhosWhoDetailHeaderRow'>
            </span> 
            <span data-whoswhoKey= '@Model.LastName' class='WhoswhoDetailRow WhosWhoDetailHeaderRow'>
            </span> 
         </div> 
         @foreach (var column in Model.GetColumns()){
            <div class="row"> 
               @column.HeaderText: <span class='WhoswhoDetailRow' data-whoswhoKey='@column.Key.ToUpper()'></span>
            </div>
         }
      </div>
   </div>
</div>

Yes, if you look close enough, you will see that the problem was a self closing span.
Just change the <span …. /> into <span …..>…</span> and your problem will be fixed.

Leave a Reply

Your email address will not be published. Required fields are marked *