webdialog css problems in firefox

410

Eric posted over 15 years ago

Hello,

I'm seeing some strange behavior in FF 3 with the webdialog window 8.2.20082.1000.

I have a page that uses this control. In IE it looks fine both on my development box and on my control test machine.

In FF it looks okay on my development box (Windows Vista), but on my control test machine (Win2003), the styles are messed up.

html source in FF before my control is displayed:

html source on my control machine in FF (using Firebug) after my control is displayed:

<td id=":1269613512.5:mkr:10" class="igdw_BodyEdgeLeft" mkr="10" style="margin: 0px;"> </td>
<td id=":1269613512.6:mkr:11" class="igdw_BodyContentArea" mkr="11" style="height: 203px; width: 218px;">

The 218px width here his much too small.

html source on my development machine in FF (using Firebug) after my control is displayed:

This is 634px, which is right.

html source in IE (using IE developer toolbar) after my control is displayed:

<TD style="MARGIN: 0px" id=:1269613512.5:mkr:10 class=igdw_BodyEdgeLeft mkr="10"> </TD>
<TD style="WIDTH: 634px; HEIGHT: 205px" id=:1269613512.6:mkr:11 class=igdw_BodyContentArea mkr="11">
<DIV style="HEIGHT: 205px; OVERFLOW: hidden" id=:1269613512.7:mkr:16 class=igdw_BodyContent mkr="16">

The 634 px width is right.

I'm setting the height of my web dialog window in the javascript that displays it, but I'm not touching the width property. Any idea why Firefox is setting the width of the bodycontentarea to 218 on the control machine, but not the development machine? The code is the same.

-Eric

24497

Suggested Answer
[Infragistics] Viktor Snezhko posted over 14 years ago in reply to Eric

Hi Eric,

That is strange case. If you go so far as getting html elements, then I can suggest to use public objects exposed by dialog. The reference to container of content is returned by getBody() of ContentPane object. The igdw_BodyContentArea is applied to TD which has DIV as its child. The element[0] is unstable. Under some browsers it may return not DIV, but a dummy text and #text actual child DIV will be element[1]. Adjustments can be done within Loaded event. Below are suggested codes for that. Since I could not reproduce that, actual final calculations should be improved and probably will be different.
Note: to check available member methods/variables of dialog, you may look at CSOM docs or put debugger at the top of WebDialogWindow1_Loaded and IE will give all information.

<script type="text/javascript" id="igClientScript">
function WebDialogWindow1_Loaded(sender, eventArgs)
{
var contentDiv = sender.get_contentPane().getBody();
var td = contentDiv.parentNode;
var mainDiv = sender.get_element();
//_bug4('body:' + contentDiv.offsetWidth + ' td:' + contentDiv.parentNode.offsetWidth + ' elem:' + sender.get_element().offsetWidth);
if(mainDiv.offsetWidth - contentDiv.offsetWidth > 40)
{
  td.style.width = '630px';
  //contentDiv.style.width = '630px';
}
else if(td.offsetWidth - contentDiv.offsetWidth > 2)
  contentDiv.style.width = td.offsetWidth + 'px';
}
</script>
<ig:WebDialogWindow ID="WebDialogWindow1" runat="server" Width="640px" Height="300px">
  <ClientEvents Loaded="WebDialogWindow1_Loaded" />
</ig:WebDialogWindow>
Cancel
Reply

Reject Answer

Cancel
410

Eric posted over 15 years ago in reply to Eric

Hmmm I managed to fix this (or workaround it) by explictly specifying a width for the BodyContentArea:

document.getElementsByClassName('igdw_BodyContentArea')[0].style.width = "630px"

I'm not sure why this only seemed to be a problem on one web server.

-Eric
Cancel
Reply

Cancel
410

Eric posted over 15 years ago

I've manage to step through the function that displays the web dialog using Firebug. I'm not seeing this width property get set anywhere prior to the show method getting called from my Javascript. I'd like to step into the .show method, I have a BUNCH of Infragistics javascript files that are loaded. Anybody know which one has the .show method?
Cancel
Reply

Cancel