Infragistics WebImageButton width problems on non IE Browsers

While testing our application on different browsers, I came across a problem that Infragistic's WebImageButton has on non IE browsers. In particular the width somehow gets set to 0px and the button will not show up. The HTML to show a Save/Cancel set of buttons is as follows:

<div style="margin-left: 40%; margin-right: auto; width: 20%; margin-top: 2em; padding-bottom: 1em;
height: 2em;">
   <div style="width: 100%; height: auto;">
       <div clientselector="btnSave_Container" style="float: left; width: 48%; margin-right: 2%;height: auto;">
             <div style="width: 6em; float: right;" >
                  <igtxt:WebImageButton ID="btnSave" runat="server" Width="100%">
                         <ClientSideEvents Click="SaveView" />
                  </igtxt:WebImageButton>
             </div>
      </div>
      <div style="float: left; width: 45%; height: auto;">
          <div style="width:6em;float:left;" >
               <igtxt:WebImageButton ID="btnCancel" runat="server" Width="100%">
                    <ClientSideEvents Click="closeAddEditDialog" />
              </igtxt:WebImageButton>
          </div>
      </div>
  </div>
</div>
--------------------------------
When viewing this set of buttons in IE8 it looks as follows:

Note that the Save and Cancel buttons are the same size and appear to obey the CSS style of 100% of the containg <div> of width 6em.

Using IE's developer tools, this confirms my assumption:

 

Note that the <table> which is the WebImageButton rendered, has an inline width style of 100% .

However when viewing this same HTML in Chrome, I see the following:

Not what I would expect to see! Using Chrome's developer tools I saw that the <table> did NOT have the style width=100% as it did in IE but rather 0px. This also happens in Firefox. I didn't test Safari but would expect it to be the same as Chrome.

When I reported this to Infragistic's support, they were able to reproduce the problem as well which is good because I didn't want this to be a WOMM (Works On My Machine) issue. A work-around they suggested was to set the style's width in the PreRender Event of the WebImageButton :

WebImageButton1.Attributes.Add("style", width:100%");

Although this works, I would have to set this in code for every WebImageButton (which I have a few). The approach I used was to simply use a CSS class with a child selector to enforce the width as follows:

.WebImageButtonContainer

{

}

.WebImageButtonContainer > table

{

width:100% !important;

}
 
This will force the width of the <table> (WebImageButton) to be 100% no matter what, which is how I want this to work. By adding this class to the containg div-

<div style="margin-left: 40%; margin-right: auto; width: 20%; margin-top: 2em; padding-bottom: 1em;
height: 2em;">
     <div style="width: 100%; height: auto;">
          <div clientselector="btnSave_Container" style="float: left; width: 48%; margin-right: 2%;height:auto;">
               <div style="width: 6em; float: right;" class="WebImageButtonContainer" >
                   <igtxt:WebImageButton ID="btnSave" runat="server" Width="100%">
                       <ClientSideEvents Click="SaveView" />
                  </igtxt:WebImageButton>
               </div>
          </div>
         <div style="float: left; width: 45%; height: auto;">
               <div style="width:6em;float:left;" class="WebImageButtonContainer" >
                   <igtxt:WebImageButton ID="btnCancel" runat="server" Width="100%">
                        <ClientSideEvents Click="closeAddEditDialog" />
                  </igtxt:WebImageButton>
         </div>
    </div>
  </div>
</div>
--------


View the HTML with Chrome now works as desired:
 

Using Chrome's developer tools I can see that the class has overridden the inline width of 0px:

Infragistics Killer App Contest. Reveille Realtime

OK so the 'Show us yours' popup along with the picture did indeed catch my eye on Infragistics homepage: http://infragistics.com/Default.aspx. The chance of winning the TV was nice as well.

Last year we released Reveille Management Consoles V5.1. A component of this is called Realtime which is a web dashboard:

http://www.reveillesoftware.com/managementconsoles.html

When evaluating a controls product we were initially drawn to Infragistic's 3D charts and gauges. The other controls included in the product came as a bonus. Over a period of time, we found several other Infragistics controls to be of value in the look of our realtime product. With our extensive use of Infragistics controls, AJAX and jQuery, we were able to produce a pure web product without using Flash or Silverlight. It works on IE7+, Firefox, Chrome and Safari as well.



The homepage of Realtime utilizes several Infragistics controls:

• WebSplitter
• ultraWebTree
• webImageButton
• webGroupBox
• UltraGauge
  

All of the data values on the homepage are automatically refreshed at a time set by the user. Instead of an ASP.Net postback, we used a webservice call to an asmx and then updated the values using javascript. To further give the user a smooth refresh look (no postback flickering), we use Infragistic's AsyncRefresh feature on the Ultraguages. When we update the guages, the image is updated smoothly on the screen and does not flicker when the guage image is updated on the screen. A very nice feature! I wish the charts had the same feature!


Clicking on one of the ultraWebTree items, which was loaded from our asp.net web.sitemap file, the target url is loaded into the viewer panel of the websplitter.
Utilizing ASP.Net's AJAX update panels, the ultraWebCharts are drawn using the filter criteria in the top section. Each dropdown list fires an async postback to redraw the charts. Sure would be nice to have the asyncrefresh on the charts like the Ultraguage has. One nice thing that we do on this page is handle a window resize event and redraw the charts to fit. For example, if you click the hide pane of the WebSplitter to hide the navigation tree, the charts will be redrawn to fit the content window's new size. Using jQuery functions to recalculate the height and width of the 4 chart containers, we redraw the charts to fit nicely in its window:


For our reports section, we used the UltraWebGrid to create an HTML view of the report.

We allow the user to save this report in either the database or to their local machine. Using Infragistic's Grid DocExporter, we are able to convert the grid to a PDF,Excel or Text file. The Date dropdown controls on the page? A combination of Infragistic's Webcalendar and WebDateTimeEdit field! In NetAdvantage 10.1 for ASP.Net, they have released a WebDatePicker which is supposed to replace using these 2 controls and a javascript function.